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

.section {
  padding-block: var(--space-6);
  scroll-margin-top: var(--nav-height);
}

.section--dark {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.section__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.section--dark .section__eyebrow {
  color: var(--color-text-muted-inverse);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-7);
  }
}