:root {
  /* Breakpoints (px) — match Figma frame ranges exactly */
  --bp-tablet: 700px;
  --bp-desktop: 1025px;
  --bp-desktop-l: 1728px;

  /* Mobile (up to 699px): 2 columns, stretch */
  --grid-columns: 2;
  --grid-margin: 12px;
  --grid-gutter: 12px;

  /* Wide screens (Ira, 21 Sep): the grid stretches up to a 1440px window.
     Beyond that the columns, gutters and 40px margins stay exactly as at
     1440 (a 1360px column container), centred; only the outer space grows. */
  --grid-max-width: 1440px;
}

/* Tablet: 700–1024px → 4 columns, stretch */
@media (min-width: 700px) {
  :root {
    --grid-columns: 4;
    --grid-margin: 20px;
    --grid-gutter: 12px;
  }
}

/* Desktop: 1025px+ → 12 columns, stretch up to 1440px */
@media (min-width: 1025px) {
  :root {
    --grid-columns: 12;
    --grid-margin: 40px;
    --grid-gutter: 12px;
  }
}

/* Wide: 1441px+ → the 1440 layout, centred (see --grid-max-width). */

/* --------------------------------------------------------------------------
   Grid container
   - Stretch breakpoints (mobile/tablet/desktop): margin = side padding,
     columns fill the remaining width via CSS Grid.
   - Wide (1441px+): the grid keeps its 40px padding and locks at 1440px,
     centred, so the 1360px column container never grows.
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
  padding-inline: var(--grid-margin);
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1441px) {
  .grid {
    max-width: var(--grid-max-width);
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   Column-span helpers
   Usage: <div class="grid">
            <div class="col-span-6">...</div>
          </div>
   Spans are clamped to the column count at each breakpoint automatically
   via min(), so a span requested on desktop won't overflow on mobile.
   -------------------------------------------------------------------------- */
.col-span-1  { grid-column: span min(1, var(--grid-columns)); }
.col-span-2  { grid-column: span min(2, var(--grid-columns)); }
.col-span-3  { grid-column: span min(3, var(--grid-columns)); }
.col-span-4  { grid-column: span min(4, var(--grid-columns)); }
.col-span-5  { grid-column: span min(5, var(--grid-columns)); }
.col-span-6  { grid-column: span min(6, var(--grid-columns)); }
.col-span-7  { grid-column: span min(7, var(--grid-columns)); }
.col-span-8  { grid-column: span min(8, var(--grid-columns)); }
.col-span-9  { grid-column: span min(9, var(--grid-columns)); }
.col-span-10 { grid-column: span min(10, var(--grid-columns)); }
.col-span-11 { grid-column: span min(11, var(--grid-columns)); }
.col-span-12 { grid-column: span min(12, var(--grid-columns)); }
.col-span-full { grid-column: 1 / -1; }