/*
 * Page composition only. Colors, type, spacing and components come from the
 * design system (design-system/tokens.css and components.css); this file only
 * arranges them, using tokens for every value.
 */

/* Vertical stacks of blocks inside a section */
.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-64);
}

.stack--sm {
  gap: var(--space-32);
}

.stack--center {
  align-items: center;
  text-align: center;
}

/* Cards and grids span the full container width */
.stack > .card-grid,
.stack > .numbered-list {
  align-self: stretch;
}

.measure-lede {
  max-width: var(--measure-lede);
}

/* The hero follows the header closely and flows into the pillars section */
.hero {
  padding-block: var(--space-64) 0;
}