/* ==========================================================================
   Layout
   --------------------------------------------------------------------------
   Container: content edge = --gutter (85px at 1360), max --container.
   ========================================================================== */

.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}


/* ==========================================================================
   Section: outer frame of a content element (Content Blocks)
   --------------------------------------------------------------------------
   White sections use margins: they collapse, so two elements in a row are
   one --space-section apart (not two). Sections with a background use
   padding instead, so the color reaches the edge of the spacing.

   .section--space-top-* / .section--space-bottom-*   none | small | large
   .section--bg-*                                     light | dark
   ========================================================================== */
.section {
  --space-top: var(--space-section);
  --space-bottom: var(--space-section);
  margin-block: var(--space-top) var(--space-bottom);
}
.section--space-top-none { --space-top: 0px; }
.section--space-top-small { --space-top: calc(var(--space-section) / 2); }
.section--space-top-large { --space-top: calc(var(--space-section) * 1.5); }
.section--space-bottom-none { --space-bottom: 0px; }
.section--space-bottom-small { --space-bottom: calc(var(--space-section) / 2); }
.section--space-bottom-large { --space-bottom: calc(var(--space-section) * 1.5); }

.section:is(.section--bg-light, .section--bg-dark) {
  margin-block: 0;
  padding-block: var(--space-top) var(--space-bottom);
}
.section--bg-light {
  background: var(--c-tint);
  color: var(--c-text);         /* also inside a dark section (box in a column) */
}
.section--bg-dark {
  background: var(--c-text);
  color: var(--c-white);
}