* {
	text-box: trim-both ex alphabetic;
}

:root {
	--gap: calc(1rlh - 1rex);
  --gap--relative: calc(1lh - 1ex);

  font-size-adjust: ex-height 0.6;

  --gap-1: calc(var(--gap) * 0.5);
  --gap-2: calc(var(--gap) * 0.75);
  --gap-3: calc(var(--gap) * 1.5);
  --gap-4: calc(var(--gap) * 2);
  --gap-5: calc(var(--gap) * 3);
  --gap-6: calc(var(--gap) * 4);
}

@media (max-width: 860px) {
  :root {
    --gap-3: calc(var(--gap) * 1.25);
    --gap-4: calc(var(--gap) * 1.75);
    --gap-5: calc(var(--gap) * 2.25);
    --gap-6: calc(var(--gap) * 3);
  }
}

@media (max-width: 520px) {
  :root {
    --gap-3: var(--gap);
    --gap-4: calc(var(--gap) * 1.35);
    --gap-5: calc(var(--gap) * 1.75);
    --gap-6: calc(var(--gap) * 2.25);
  }
}