/* Generated by scripts/build.mjs from tokens/*.json. Do not edit; change the Figma variables and export. */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: var(--container-gutter);
}

/* A span that lays its children on the parent grid's tracks. Gaps are inherited. */
.subgrid {
  display: grid;
  grid-template-columns: subgrid;
}

/* small: 2 columns, every span full width. */
.span-1,
.span-2,
.span-3,
.span-4,
.span-5,
.span-6,
.span-7,
.span-8,
.span-9,
.span-10,
.span-11,
.span-12,
.span-all {
  grid-column: 1 / -1;
}

/* Empty spacer elements only shift content on the large grid. */
@media (width < 60em) {
  :is(.grid, .subgrid) > :is(span, div):empty {
    display: none;
  }
}

/* medium: 8 columns. */
@media (min-width: 35em) {
  .span-1,
  .span-2,
  .span-3,
  .span-4 {
    grid-column: span 2;
  }

  .span-5,
  .span-6,
  .span-7 {
    grid-column: span 4;
  }

  .span-8,
  .span-9,
  .span-10,
  .span-11 {
    grid-column: span 6;
  }

  .span-12 {
    grid-column: 1 / -1;
  }
}

/* large: 12 columns, spans as written. */
@media (min-width: 60em) {
  .span-1 {
    grid-column: span 1;
  }
  .span-2 {
    grid-column: span 2;
  }
  .span-3 {
    grid-column: span 3;
  }
  .span-4 {
    grid-column: span 4;
  }
  .span-5 {
    grid-column: span 5;
  }
  .span-6 {
    grid-column: span 6;
  }
  .span-7 {
    grid-column: span 7;
  }
  .span-8 {
    grid-column: span 8;
  }
  .span-9 {
    grid-column: span 9;
  }
  .span-10 {
    grid-column: span 10;
  }
  .span-11 {
    grid-column: span 11;
  }
  .span-12 {
    grid-column: span 12;
  }
}