/**
 * Stats component
 */

.stats-wrapper {
  background-image: linear-gradient(to right, var(--primary-dark), var(--primary-medium));
  background-position: 50%;
  border-radius: var(--border-radius-xxl);
  color: var(--white);
  overflow: hidden;
  padding-block: var(--spacing-2xl);
  padding-inline: var(--spacing-xl);
  position: relative;

  @media (width >= 768px) {
    padding-block: var(--spacing-3xl);
    padding-inline: var(--spacing-5xl);
  }

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../../images/hero-pattern.svg');
    background-repeat: no-repeat;
    background-position: right center;
    pointer-events: none;
  }

  .stats-grid {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--grid-gap);
    position: relative;
  }

  .stat {
    display: flex;
    flex: 1 1 200px;
    flex-direction: column-reverse;
    max-width: max(200px, (100% - 3 * var(--grid-gap)) / 4);
    text-align: center;
  }

  .stat-value,
  .stat-label {
    margin: 0;
  }

  .stat-value {
    font-size: var(--h1-font-size);
    font-weight: var(--font-weight-extra-bold);
    line-height: 1.4;
  }

  .stat-label {
    font-size: var(--paragraph-font-size);
    font-weight: var(--font-weight-bold);
  }
}