:root {
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 40px;
  --space-2xl: 48px;
  --space-3xl: 54px;
  --space-4xl: 64px;
  --space-5xl: 72px;
  --space-6xl: 80px;

  /* Responsive step-pairs: --space-{mobile}-{desktop}. Mobile value here;
     desktop value overridden in the media query below. */
  --space-s-5xl: 16px;
  --space-l-5xl: 32px;
  --space-xl-6xl: 40px;
  --space-2xl-5xl: 48px;
  --space-4xl-6xl: 64px;
}

@media (min-width: 48rem) {
  :root {
    --space-s-5xl: 72px;
    --space-l-5xl: 72px;
    --space-2xl-5xl: 72px;
    --space-xl-6xl: 80px;
    --space-4xl-6xl: 80px;
  }
}