:root {
  /* Space between items (margin or gap). */
  --space-gap: 2em;
  --space-gap-x: var(--space-gap);
  --space-gap-y: var(--space-gap);
  --space-gap-tight: 1em;
  --space-gap-x-tight: var(--space-gap-tight);
  --space-gap-y-tight: var(--space-gap-tight);
  --space-gap-minimal: .25em;
  --space-gap-x-minimal: var(--space-gap-minimal);
  --space-gap-y-minimal: var(--space-gap-minimal);
  /* Amount of indentation on list items. */
  --space-indent: 1em;
  /* Space between and the edge of their containers (padding). */
  --space-inset: 20px;
  --space-inset-x: var(--space-inset);
  --space-inset-y: var(--space-inset);
  --space-inset-min: 20px;
}

@media (min-width: 600px) {
  :root {
    --space-gap: 30px;
    --space-inset: 30px;
  }
}

@media (min-width: 768px) {
  :root {
    --space-gap: 42px;
    --space-inset: 42px;
  }
}

@media (min-width: 992px) {
  :root {
    --space-gap: 60px;
    --space-inset: 60px;
  }
}