.hero-facts {
  display: grid;
  gap: 0.8rem;
  margin-block-start: 1.5rem;
}

.hero-fact {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.8rem;
  row-gap: 0.16rem;
  align-items: center;
  justify-items: start;
  padding: 1rem 1.05rem;
  border-radius: var(--radius-lg);
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #f7efe2, #f1e7d9);
  box-shadow:
    inset 0 1px 0 var(--surface-highlight),
    0 18px 28px -24px rgba(18, 28, 24, 0.18);
}

.hero-fact::before {
  content: "";
  inline-size: 0.82rem;
  block-size: 0.82rem;
  border-radius: 50%;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  box-shadow: 0 0 0 0.42rem rgba(255, 255, 255, 0.72);
}

.hero-fact:nth-child(1) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, #f3e1b1, #ebd49c);
}

.hero-fact:nth-child(1)::before {
  background: var(--signal);
}

.hero-fact:nth-child(2) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, #d8e7db, #c8ddcd);
}

.hero-fact:nth-child(2)::before {
  background: var(--accent);
}

.hero-fact:nth-child(3) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, #e3e8db, #d2d9ca);
}

.hero-fact:nth-child(3)::before {
  background: var(--ink-muted);
}

.hero-fact strong {
  grid-column: 2;
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
}

.hero-fact span {
  grid-column: 2;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

@supports (container-type: inline-size) {
  @container hero (min-width: 38rem) {
    .hero-facts {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @container hero (min-width: 56rem) {
    .hero-copy--split .hero-facts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-copy--split .hero-fact:last-child {
      grid-column: 1 / -1;
    }
  }
}