@layer components {
  .container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }
  .container--narrow {
    max-width: var(--max-width-narrow);
  }
  .container--wide {
    max-width: var(--max-width-wide);
  }
  .section {
    position: relative;
    scroll-margin-top: var(--header-height);
    padding-block-start: calc(var(--space-12) + var(--radius-3xl));
    padding-block-end: calc(var(--space-12) + var(--radius-3xl) + var(--radius-3xl));
    border-top-left-radius: var(--radius-3xl);
    border-top-right-radius: var(--radius-3xl);
    border-top: 0.5px solid var(--color-border);
    margin-block-start: calc(-1 * var(--radius-3xl));
  }
  @media (min-width: 768px) {
    .section {
      padding-block-start: calc(clamp(var(--space-20), 8vw, 8rem) + var(--radius-3xl));
      padding-block-end: calc(clamp(var(--space-20), 8vw, 8rem) + var(--radius-3xl));
    }
  }
  .section--glow {
    background: radial-gradient(circle at 50% -250%, var(--color-canvas-elevated), var(--color-canvas-alt), var(--color-canvas));
  }
  .section--alt {
    background: radial-gradient(at 50% 0%, var(--color-canvas-alt) 0%, var(--color-canvas) 50%), var(--color-canvas);
    position: relative;
  }
  .section--alt::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, var(--color-accent-soft) 0%, transparent 50%), radial-gradient(circle at 80% 80%, var(--color-accent-softer) 0%, transparent 50%);
    pointer-events: none;
  }
  .section--overlap {
    position: relative;
    margin-block-start: calc(-1 * var(--space-12));
    padding-block-start: calc(var(--space-8) + var(--space-12));
    background-color: var(--color-canvas);
  }
  @media (min-width: 768px) {
    .section--overlap {
      padding-block-start: calc(var(--section-spacing-default) + var(--space-12));
    }
  }
  .section__header {
    text-align: left;
    max-width: 42rem;
    margin-block-end: var(--space-16);
  }
  .section__header--center {
    text-align: center;
    margin-inline: auto;
  }
  .section__title {
    margin-block-end: var(--space-4);
  }
  .section__subtitle {
    font-size: var(--text-lg);
    color: var(--color-ink-subtle);
  }
  .grid {
    display: grid;
    gap: var(--grid-gap);
  }
  .grid--gap-compact {
    gap: var(--grid-gap-compact);
  }
  .grid--gap-spacious {
    gap: var(--grid-gap-spacious);
  }
  @media (min-width: 640px) {
    .grid--cols-2,
    .grid--cols-3,
    .grid--cols-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 900px) {
    .grid--cols-4 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .grid--cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .grid--cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}