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

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

.section--soft {
  background: var(--color-surface-soft);
}

.section--dark {
  color: rgb(255 255 255 / 0.78);
  background: var(--color-navy);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 31rem);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: end;
  margin-bottom: clamp(3.25rem, 5vw, 4.5rem);
}

.section-heading__side {
  padding-bottom: 0.4rem;
}

.section-heading__side .section-link {
  margin-top: 1.5rem;
}

@media (max-width: 900px) {
  .section-heading {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .section-summary {
    max-width: 42rem;
  }
}

@media (max-width: 640px) {
  :root {
    --page-gutter: 1.25rem;
    --section-space: 5rem;
  }

  .section-title {
    font-size: clamp(2.25rem, 11vw, 2.75rem);
  }
}