:root {
  --space-none: 0px;
  --space-negative: -12px;
  --space-small: 16px;
  --space-medium: 24px;
  --space-large: 32px;
  --space-extra-large: 48px;
  --space-2x-large: 72px;
  --space-3x-large: 120px;

  /* Positive distance hero graphic hangs into the next section */
  --hero-graphic-overlap: calc(var(--space-negative) * -2);
}

@media (min-width: 640px) {
  :root {
    --hero-graphic-overlap: calc(var(--space-negative) * -7);
  }
}