/* One page frame: header, hero, every section and the footer share the same content width and gutter,
   so the logo, headline, cards and footer start on the same vertical line at every screen width. */

header, .hero, .section {
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Filled panels and the footer rule sit on the gutter; their own padding stays inside. */
.panel, footer {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--content);
  margin-inline: auto;
}

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

.section-heading { text-align: center; }
.section-heading .eyebrow { justify-content: center; margin-bottom: 14px; }
.section-heading > p { margin-top: 22px; font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-muted); }
.section h2 { font-size: var(--text-h2); line-height: var(--leading-heading); }