/**
 * @file
 * Statistic: 3 up feature
 *
 * Styles for Statistick: 3 up feature object.
 */

 @use '_helper' as *;

.stat3up {
  &__wrap {
    @media screen and (min-width: $break-medium) {
      gap: 30px $spacing-horizontal-column-gap-md;
    }

    @media screen and (min-width: $break-large) {
      gap: $spacing-horizontal-column-gap-lg;
    }

    .stat3up__item {
      @media screen and (min-width: $break-large) {
        flex: 0 0 calc((100% / 3) - (($spacing-horizontal-column-gap-lg * 2) / 3));
      }
    }
  }

  &__item {
    margin-bottom: 20px;
    padding: 20px;
    background-color: $color-blue-light;
    border-radius: 15px;

    @media screen and (min-width: $break-medium) {
      margin: 0;
      padding: 30px;
    }

    @media screen and (min-width: $break-medium) and (max-width: ($break-large - 1)) {
      min-height: 197px;
    }
  }

  &__number {
    @include h4;
    margin-bottom: 6px;
    color: $color-blue-dark;

    @media screen and (min-width: $break-medium) {
      margin-bottom: 4px;
    }

    @media screen and (min-width: $break-large) {
      margin: 0;
    }
  }

  &__cta {
    margin-top: 10px;

    @media screen and (min-width: $break-large) {
      margin-top: 20px;
    }
  }
}