/* Fluid space scale (Utopia: https://utopia.fyi/space/calculator)
   320px -> 1240px viewport, base 18px -> 20px, steps x0.25 to x6.
   Uses px because bootstrap sets html font-size to 10px, which breaks rem. */
:root {
  --space-3xs: clamp(4.5px, 4.3261px + 0.0543vw, 5px);
  --space-2xs: clamp(9px, 8.6522px + 0.1087vw, 10px);
  --space-xs: clamp(13.5px, 12.9783px + 0.163vw, 15px);
  --space-s: clamp(18px, 17.3043px + 0.2174vw, 20px);
  --space-m: clamp(27px, 25.9565px + 0.3261vw, 30px);
  --space-l: clamp(36px, 34.6087px + 0.4348vw, 40px);
  --space-xl: clamp(54px, 51.913px + 0.6522vw, 60px);
  --space-2xl: clamp(72px, 69.2174px + 0.8696vw, 80px);
  --space-3xl: clamp(108px, 103.8261px + 1.3043vw, 120px);

  /* Vertical padding for page sections: 72px -> 80px (was .padded-block) */
  --section-padding: var(--space-2xl);

  /* Gap between columns of top-level rows, stacked or side by side */
  --column-gap: var(--space-3xl);

  /* Banner-style sections: 1/4 of the normal section padding */
  --section-padding-banner: calc(var(--section-padding) * 0.25);
}