/* 8px grid. Vary the rhythm — hero to content is a large gap, content to
   footer a medium one; the same gap everywhere reads as a wireframe. */
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 96px;

  --section-padding-y: 104px;
  --container-max: 1200px;
  --container-pad: 24px;
  --hero-media-max: 640px;
}