/*
  Grid foundation.
  Desktop: 12 columns. Mobile (<1024px): 4 columns.
  Any element's column span/position stays defined in these terms
  so section placement is consistent across breakpoints.
*/

:root {
  --cols: 12;
  --gutter: 20pt;
  --margin: 20pt;
  --container-max: 1440px;
  /* Width of a single column, standalone -- for elements outside the
     grid (fixed/absolute) that still need to size themselves against N
     columns' worth of width via calc(). Recomputes automatically at the
     mobile breakpoint since it depends on --cols. */
  --col: calc((min(100vw, var(--container-max)) - 2 * var(--margin) - (var(--cols) - 1) * var(--gutter)) / var(--cols));
}

@media (max-width: 1024px) {
  :root {
    --cols: 4;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gutter);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin);
  box-sizing: border-box;
}