:root {
  --fact-grid-icon-color: var(--color-orange);
  --fact-grid-fact-background-color: var(--color-orange-light);

  @include use-responsive-sizing(--fact-grid-columns, (xs: 1, s: 2, l: 3, xl: 4));
  @include use-responsive-sizing(--fact-grid-icon-size, responsive-map(xs 5rem, xl 8rem));
}

.fact-grid__text {
  @include use-responsive-sizing(margin-block-end, responsive-map(xs 4rem, xl 7rem));
}

.fact-grid__icon {
  color: var(--fact-grid-icon-color);
  font-size: var(--fact-grid-icon-size);
  position: absolute;
  transform: rotate(-105deg) translate(0.6em, 0.3em);
}

.fact-grid__facts {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(var(--fact-grid-columns), minmax(0, 1fr));
  margin-block-start: calc(var(--fact-grid-icon-size) * 0.6);

  @include use-responsive-sizing(row-gap, responsive-map(xs 2rem, xl 4rem));
  @include use-responsive-sizing(column-gap, $gaps);
}

.fact-grid__fact {
  background-color: var(--fact-grid-fact-background-color);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-small);

  @include use-responsive-sizing(padding-block, responsive-map(xs 1.75rem, l 2.5rem));
  @include use-responsive-sizing(padding-inline, responsive-map(xs 2rem, l 3rem));
}

.fact-grid__fact-label,
.fact-grid__fact-text {
  hyphens: auto;
}

.fact-grid__fact-label {
  --line-clamp: 2;

  font-size: 1.6rem;
  margin-block-end: 1rem;
  word-break: break-word;
}

.fact-grid__fact-text {
  @include use-responsive-sizing(font-size, responsive-map(xs 2.6rem, xl 3.6rem));
}