/* Container, page sections and section headings (DESIGN_CONTRACT.md, section 6). */

@layer layout {
  .container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .page-section {
    display: grid;
    gap: var(--space-6);
    padding-block: var(--space-8);
  }

  .page-section + .page-section { border-top: 1px solid var(--line); }

  .section-heading {
    display: grid;
    gap: var(--space-3);
  }

  .section-heading p { color: var(--ink-muted); }

  @media (min-width: 64rem) {
    .page-section { padding-block: var(--space-9); }
  }
}