@layer components {
  /* One line from the page, said again as large as it will go, under the brand's mark. */
  .site-quote {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12) var(--gutter-fluid);
    text-align: center;
  }

  .site-quote__mark {
    inline-size: var(--space-10);
    block-size: var(--space-10);
    color: var(--color-ink-display);
  }

  .site-quote__words {
    max-inline-size: var(--measure-read-quote);
    font: var(--type-site-quote);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-display);
    text-wrap: balance;
  }

  @media (width >= 900px) {
    .site-quote {
      padding-block: var(--space-13);
    }

    .site-quote__words {
      font: var(--type-site-quote-lg);
    }
  }
}