/*
 * 12-column layout grid on a 12px base unit.
 *
 * Desktop exposes all 12 columns; below the breakpoint the grid collapses to
 * fewer tracks while keeping the same 12px gutter/rhythm. Use `.grid` on a
 * container and `.col-*` (or inline `style="--span: n"`) on children.
 */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--space-3);
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
  box-sizing: border-box;
}

/* Span helpers — desktop */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Generic span via custom property: style="--span: 4" */
[style*="--span"] { grid-column: span var(--span); }

/* Start position helper: style="--start: 3" */
[style*="--start"] { grid-column-start: var(--start); }

/*
 * Tablet / mobile: same 12px rhythm, fewer columns. Spans clamp to the
 * available tracks so a `.col-8` simply fills the row rather than overflowing.
 */
@media (max-width: 768px) {
  .grid { --grid-columns: 6; }
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { grid-column: span 6; }
  .col-5, .col-6 { grid-column: span 6; }
}

@media (max-width: 480px) {
  .grid {
    --grid-columns: 4;
    --grid-margin: var(--grid-unit);
  }
  [class^="col-"], [class*=" col-"] { grid-column: span 4; }
}