@layer components {
  .facts {
    display: grid;
    grid-template-columns: minmax(7rem, 9rem) 1fr;
    gap: var(--block-space-quarter) var(--block-space);
    margin-block: var(--block-space);

    & dt {
      color: var(--color-muted);
      font-size: var(--text-small);
    }

    & dd {
      margin: 0;
    }

    /* A 9rem label column eats nearly half a phone, so the term goes above the value instead. */
    @media (width < 40rem) {
      grid-template-columns: 1fr;
      gap: 0;

      & dt {
        margin-block-start: var(--block-space-half);
      }
    }
  }

  .callout {
    padding: var(--card-padding);
    border: 1px solid var(--color-rule);
    border-inline-start: 3px solid var(--color-accent);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--radius);
    border-end-end-radius: var(--radius);
    background: var(--color-shade);
  }
}