@layer components {

  .fact-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: var(--container-gap);
    padding-block: var(--space-l);
    border-block: var(--divider);
  }

  .fact-strip__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    min-inline-size: 0;
  }

  .fact-strip__label {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-heading);
    font-size: var(--text-overline);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-subtle);
  }

  .fact-strip__icon {
    color: var(--secondary);
    flex-shrink: 0;
  }

  .fact-strip__value {
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    color: var(--text-main);
    text-wrap: pretty;
  }

}