@layer layout {
  /* 1400px is the maximum actual content width. Backgrounds can span the viewport. */
  .container {
    width: calc(100% - 2 * var(--page-gutter));
    max-width: var(--container-max);
    margin-inline: auto;
  }

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

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

  .stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .stack--small {
    gap: var(--space-2);
  }
  .stack--large {
    gap: var(--space-5);
  }

  .cluster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .grid,
  .split {
    display: grid;
    gap: var(--grid-gap);
  }

  .grid > *,
  .split > *,
  .stack > * {
    min-width: 0;
  }

  .stack > .grid,
  .stack > .section-heading {
    width: 100%;
  }

  .split {
    align-items: start;
    gap: var(--space-7);
  }

  @media (min-width: 40rem) {
    .grid--three,
    .grid--four {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 56rem) {
    .grid--two,
    .split {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .split {
      gap: clamp(2rem, 5vw, 5rem);
    }
  }

  @media (min-width: 64rem) {
    .grid--three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .grid--four {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .split--wide {
      grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    }
  }
}