/*============================
=            Grid            =
=============================*/

.-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 24px;
}

.col-12 {
  grid-column: span 12;
}
@media only screen and (min-width: 600px) {
  .col-m-6 {
    grid-column: span 6;
  }
}
@media only screen and (min-width: 920px) {
  .col-l-2 {
    grid-column: span 2;
  }
  .col-l-3 {
    grid-column: span 3;
  }
  .col-l-4 {
    grid-column: span 4;
  }
  .col-l-5 {
    grid-column: span 5;
  }
  .col-l-6 {
    grid-column: span 6;
  }
  .col-l-7 {
    grid-column: span 7;
  }
  .col-l-8 {
    grid-column: span 8;
  }
  .col-l-10-c {
    grid-column: 2 / span 10;
  }
}
@media only screen and (min-width: 1220px) {
  .col-xl-2 {
    grid-column: span 2;
  }
  .col-xl-3 {
    grid-column: span 3;
  }
  .col-xl-4 {
    grid-column: span 4;
  }
  .col-xl-6 {
    grid-column: span 6;
  }
  .col-xl-7 {
    grid-column: span 7;
  }
  .col-xl-8 {
    grid-column: span 7;
  }
  .col-xl-12 {
    grid-column: span 12;
  }
}