@layer layout {
  .container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }
  .container--narrow {
    width: min(100% - 2 * var(--gutter), var(--container-narrow));
  }
  .section {
    position: relative;
    isolation: isolate;
    padding-block: var(--section-space);
    overflow-x: clip;
  }
  .section__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }
  .section--light {
    background: var(--surface-light);
    color: var(--text-on-light);
  }
  .section__title {
    font-family: var(--ff-serif);
    font-weight: 300;
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
  }
  .eyebrow {
    font-family: var(--ff-display);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-display);
    color: var(--text-soft);
  }
  .stack > * + * {
    margin-block-start: var(--stack-space, var(--space-md));
  }
  .grid {
    display: grid;
    gap: var(--grid-gap, var(--space-lg));
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, var(--grid-min, 260px)), 1fr)
    );
  }
}