@layer components {
  /* A finding told by its numbers, side by side on the deep stage, set as large as the page
     allows, with where it comes from beneath. The first number recedes so the gap between them
     reads at a glance. */
  .site-facts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-13) var(--gutter-fluid);
    background-color: var(--color-stage);
    color: var(--color-stage-ink);
    text-align: center;
  }

  .site-facts__title {
    max-inline-size: var(--measure-site);
    font: var(--type-site-headline);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
  }

  .site-facts__row {
    display: grid;
    gap: var(--space-11);
    max-inline-size: var(--max-content);
  }

  .site-fact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
  }

  .site-fact__figure {
    font: var(--type-site-fact);
    letter-spacing: var(--tracking-display);
  }

  .site-fact:first-child:not(:only-child) .site-fact__figure {
    color: var(--color-stage-muted);
  }

  .site-fact__words {
    max-inline-size: var(--measure-tight);
    font: var(--type-site-lead);
    color: var(--color-stage-muted);
    text-wrap: balance;
  }

  .site-facts__source {
    font: var(--type-caption);
    color: var(--color-stage-muted);
  }

  @media (width >= 900px) {
    .site-facts {
      gap: var(--space-12);
      padding-block: calc(2 * var(--space-13));
    }

    .site-facts__title {
      font: var(--type-site-headline-lg);
    }

    .site-facts__row {
      grid-auto-flow: column;
      grid-auto-columns: minmax(var(--space-0), 1fr);
      gap: var(--space-13);
    }

    .site-fact__figure {
      font: var(--type-site-fact-lg);
    }

    .site-fact__words {
      font: var(--type-site-lead-lg);
    }
  }
}