.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-inline: var(--space-lg);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-2xl); }
}

.container--narrow {
  max-width: var(--content-narrow-width);
}

.section {
  padding-block: var(--space-section-y);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

.section__eyebrow {
  display: block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue-muted);
  margin-bottom: var(--space-2xl);
}

.section__title {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.u-text-center { text-align: center; }
.u-mt-md { margin-top: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.u-mt-xl { margin-top: var(--space-xl); }
.u-mt-2xl { margin-top: var(--space-2xl); }

main {
  display: flex;
  flex-direction: column;
  flex: 1;
}

[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-md));
}