/* Grid System */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col {
  flex: 1;
  padding: 0 15px;
}

.col-1 {
  flex: 0 0 8.333%;
  max-width: 8.333%;
}
.col-2 {
  flex: 0 0 16.666%;
  max-width: 16.666%;
}
.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.col-4 {
  flex: 0 0 33.333%;
  max-width: 33.333%;
}
.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.col-8 {
  flex: 0 0 66.666%;
  max-width: 66.666%;
}
.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

@media (max-width: 768px) {
  .row {
    flex-direction: column;
  }
  .col,
  [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}