@use '../core' as *;

.#{$prefix}-stat {
  color: $color-black-base;
  text-decoration: none;
  transition: all .2s ease;
  background-color: $color-white-base;
  display: flex;
  justify-content: center;
  padding: $spacing-xl $spacing-md;

  &[href]:hover {
    transform: scale(1.1);
    box-shadow: $shadow-heavy;
    color: $color-crimson-500;
    border-radius: $spacing-xs;
  }

  &[href]:focus {
    transition: none;
  }

  &__content {
    text-align: center;
  }

  &__image {
    display: flex;
    justify-content: center;
  }

  &__number {
    font-size: $ts-41;
    line-height: $line-height-tight;
  }

  &__description {
    color: $color-black-400;
    font-weight: $font-weight-medium;
    font-size: $ts-14;
    letter-spacing: .025rem;

    --flow-space: 0;
  }
}

@include mq($breakpoint-md) {
  .#{$prefix}-stat {
    padding: $spacing-xxl $spacing-xl;
  }
}