@media (min-width: 600px) {
  .c-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto;
    column-gap: 1rem;
  }

  .col-full {
    --col-span: 12;
    grid-column: span 12;
  }

  .col-three-fourths {
    --col-span: 9;
    grid-column: span 9;
  }

  .col-two-thirds {
    --col-span: 8;
    grid-column: span 8;
  }

  .col-half {
    --col-span: 6;
    grid-column: span 6;
  }

  .col-third {
    --col-span: 4;
    grid-column: span 4;
  }

  .col-fourth {
    --col-span: 3;
    grid-column: span 3;
  }

  .col-sixth {
    --col-span: 2;
    grid-column: span 2;
  }

  .col-twelveth {
    --col-span: 1;
    grid-column: span 1;
  }

  .col-half.center {
    grid-column: 4 / span 6;
  }

  .col-two-thirds.center {
    grid-column: 3 / span 8;
  }

  .col-third.center {
    grid-column: 5 / span 4;
  }

  .col-sixth.center {
    grid-column: 6 / span 2;
  }

  .offset-1 {
    grid-column: 2 / span var(--col-span, 12);
  }

  .offset-2 {
    grid-column: 3 / span var(--col-span, 12);
  }

  .offset-3 {
    grid-column: 4 / span var(--col-span, 12);
  }

  .offset-4 {
    grid-column: 5 / span var(--col-span, 12);
  }

  .offset-5 {
    grid-column: 6 / span var(--col-span, 12);
  }

  .offset-6 {
    grid-column: 7 / span var(--col-span, 12);
  }

  .offset-7 {
    grid-column: 8 / span var(--col-span, 12);
  }

  .offset-8 {
    grid-column: 9 / span var(--col-span, 12);
  }

  .offset-9 {
    grid-column: 10 / span var(--col-span, 12);
  }

  .offset-10 {
    grid-column: 11 / span var(--col-span, 12);
  }

  .offset-11 {
    grid-column: 12 / span var(--col-span, 12);
  }

  .c-grid.align-items-center {
    align-items: center;
  }

  .c-grid.align-items-end {
    align-items: end;
  }

  .c-grid.align-items-start {
    align-content: start;
  }

  .c-grid.justify-content-center {
    justify-content: center;
  }

  .c-grid.justify-content-end {
    justify-content: end;
  }

  .c-grid.justify-content-start {
    justify-content: start;
  }
}

@media (min-width: 960px) {
  .md-col-three-fourths {
    --col-span: 9;
    grid-column: span 9;
  }

  .md-col-two-thirds {
    --col-span: 8;
    grid-column: span 8;
  }

  .md-col-half {
    --col-span: 6;
    grid-column: span 6;
  }

  .md-col-third {
    --col-span: 4;
    grid-column: span 4;
  }

  .md-col-fourth {
    --col-span: 3;
    grid-column: span 3;
  }

  .md-col-sixth {
    --col-span: 2;
    grid-column: span 2;
  }

  .md-col-twelveth {
    --col-span: 1;
    grid-column: span 1;
  }

  .md-col-half.center {
    grid-column: 4 / span 6;
  }

  .md-col-two-thirds.center {
    grid-column: 3 / span 8;
  }

  .md-col-third.center {
    grid-column: 5 / span 4;
  }

  .md-col-sixth.center {
    grid-column: 6 / span 2;
  }
}

@media (min-width: 1264px) {
  .lg-col-three-fourths {
    --col-span: 9;
    grid-column: span 9;
  }

  .lg-col-two-thirds {
    --col-span: 8;
    grid-column: span 8;
  }

  .lg-col-half {
    --col-span: 6;
    grid-column: span 6;
  }

  .lg-col-third {
    --col-span: 4;
    grid-column: span 4;
  }

  .lg-col-fourth {
    --col-span: 3;
    grid-column: span 3;
  }

  .lg-col-sixth {
    --col-span: 2;
    grid-column: span 2;
  }

  .lg-col-twelveth {
    --col-span: 1;
    grid-column: span 1;
  }

  .lg-col-half.center {
    grid-column: 4 / span 6;
  }

  .lg-col-two-thirds.center {
    grid-column: 3 / span 8;
  }

  .lg-col-third.center {
    grid-column: 5 / span 4;
  }

  .lg-col-sixth.center {
    grid-column: 6 / span 2;
  }
}

@media (min-width: 1904px) {
  .xl-col-three-fourths {
    --col-span: 9;
    grid-column: span 9;
  }

  .xl-col-two-thirds {
    --col-span: 8;
    grid-column: span 8;
  }

  .xl-col-half {
    --col-span: 6;
    grid-column: span 6;
  }

  .xl-col-third {
    --col-span: 4;
    grid-column: span 4;
  }

  .xl-col-fourth {
    --col-span: 3;
    grid-column: span 3;
  }

  .xl-col-sixth {
    --col-span: 2;
    grid-column: span 2;
  }

  .xl-col-twelveth {
    --col-span: 1;
    grid-column: span 1;
  }

  .xl-col-half.center {
    grid-column: 4 / span 6;
  }

  .xl-col-two-thirds.center {
    grid-column: 3 / span 8;
  }

  .xl-col-third.center {
    grid-column: 5 / span 4;
  }

  .xl-col-sixth.center {
    grid-column: 6 / span 2;
  }
}