.stats-row__wrapper {
  .stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, minmax(6.25rem, 25vw));

    .statistic {
      height: 100%;
      border-radius: var(--spacing-13);
      color: var(--c-primary-light);
      padding: 0;
    }

    .statistic.circle {
      background-color: var(--c-primary-orange);
      height: 100%;
      border-radius: 50%;
      grid-row: 2;
    }

    .statistic.circle,
    .statistic.circle--lines {
      aspect-ratio: 1 / 1;
    }

    .statistic.pill {
      grid-column: span 2;
    }

    .statistic.pill--empty {
      background-color: var(--c-primary-light);
      grid-row: 2 / 4;
      grid-column: 4;
    }

    .statistic.statistic--icon svg {
      height: 100%;
      width: 100%;
    }

    .statistic.statistic--data {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: var(--spacing-4);
      text-align: center;
      white-space: normal;
    }

    dl {
      margin: 0;

      dd {
        margin: 0;
      }

      dt {
        font-size: var(--heading-h2);
        line-height: 120%;
      }

      dd {
        font-size: var(--text-default);
      }
    }
  }
}

.stats-row__wrapper .stats-row dl:nth-of-type(1) {
  background-color: var(--c-primary-dark);
}

.stats-row__wrapper .stats-row dl:nth-of-type(2) {
  background-color: var(--c-primary-blue);
}

.stats-row__wrapper .stats-row dl:nth-of-type(3) {
  background-color: var(--c-primary-light);
}

.stats-row__wrapper .stats-row dl:nth-of-type(3) dd {
  color: var(--c-primary-dark);
}

.stats-row__wrapper .stats-row dl:nth-of-type(3) dt {
  color: var(--c-primary-blue);
}

.paragraph--type--stats-row.c-bg--blue .statistic.pill--lines.circle--lines .icon {
  color: var(--c-primary-light);
}

.paragraph--type--stats-row.c-bg--blue dl:nth-of-type(2) {
  border: var(--spacing-2px) solid var(--c-primary-light);
}

@media (min-width: 768px) {
  .stats-row__wrapper .stats-row dl dd {
    font-size: var(--heading-h5);
  }
}

@media (min-width: 992px) {
  .stats-row__wrapper {
    max-width: 120rem;
    overflow: hidden;
    position: relative;
    margin: 0 auto;

    .stats-row {
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: 10rem;
      transform: translateX(-14%);
      width: calc(100% + 20.5%);

      .statistic.pill--empty {
        display: none;
      }

      .statistic.circle {
        grid-row: 1;
        grid-column: 5;
      }
    }
  }
}

@media (min-width: 1440px) {
  .stats-row__wrapper {
    .stats-row {
      grid-template-rows: 13.25rem;
      transform: translateX(-10%);
      width: calc(100% + 11%);
    }
  }
}