@layer components {
.facts {
  display: grid;
}

.facts__row {
  display: grid;
  gap: 0.125rem;
  padding-block: 0.5rem;
}

.facts__term {
  font-weight: var(--fw-semibold);
}

.facts__desc {
  min-inline-size: 0;
}

.facts__list {
  display: grid;
}

.facts__link {
  display: inline-block;
  padding-block: 0.25rem;
  text-decoration: underline;
}

.facts__link:hover {
  color: var(--color-purple);
}

@media (min-width: 37.5em) {
  .facts__row {
    grid-template-columns: minmax(11rem, min(22.4375rem, 34%)) minmax(0, 1fr);
    align-items: baseline;
    column-gap: 1rem;
    padding-block: 0.375rem;
  }
}
}