@layer components {
  .intro {
    padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem);
  }

  .intro__kicker {
    margin-bottom: 1.25rem;
  }

  .intro__title {
    max-width: 22ch;
  }

  .intro__title mark {
    background: var(--c-volt);
    color: var(--c-on-volt);
    font-style: normal;
    padding-inline: 0.1em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .intro__row {
    margin-top: clamp(1.5rem, 1.2rem + 1.5vw, 2.75rem);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .intro__lead {
    max-width: 46ch;
    font-size: var(--fs-lead);
    color: var(--c-ink-soft);
  }

  .intro__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .page-hero {
    position: relative;
    padding-block: clamp(3rem, 2.4rem + 3vw, 5.5rem) 0;
  }

  .page-hero__title {
    max-width: 20ch;
  }

  .page-hero__lead {
    margin-top: 1.25rem;
    max-width: 48ch;
    font-size: var(--fs-lead);
    color: var(--c-ink-soft);
  }

  .page-hero__figure {
    margin-top: clamp(2rem, 1.6rem + 2vw, 3.5rem);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--c-surface);
  }

  .page-hero__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (min-width: 48rem) {
    .page-hero__figure {
      aspect-ratio: 16 / 7.4;
    }
  }

  .error-hero {
    background: var(--c-volt);
    color: var(--c-on-volt);
    padding-block: clamp(3rem, 2rem + 5vw, 6rem);
    text-align: center;
  }

  .error-hero__code {
    font-family: var(--font-display);
    font-size: clamp(6rem, 4rem + 12vw, 16rem);
    line-height: 0.9;
  }

  .error-hero__title {
    margin-top: 0.5rem;
  }

  .error-hero__lead {
    margin-top: 1rem;
    max-width: 46ch;
    margin-inline: auto;
    font-size: var(--fs-lead);
  }

  .error-hero__cta {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
}