@use "sass:math";

@import '~styles/config';

.discount {
  &__wrapper {
    padding: $gutter*2;
  }

  &__title {
    margin-bottom: $gutter;

    font-family: $font-heading;
    font-size: 26px;
    font-weight: 700;

    @media (min-width: $min-mobile) {
      font-size: 42px;
    }
  }

  &__description {
    margin-bottom: $gutter;
    font-size: $font-size;
  }

  &__newPeriod {
    margin-bottom: $gutter;
    font-weight: 700;
  }

  &__button {
    @media (min-width: $min-tablet) {
      @include grid-col(percentage(math.div(6, 12)));
      margin-left: percentage(math.div(6, 12));
    }
  }

  &__inputRow {
    @include grid-row();
  }
  
  &__inputCol {
    margin-bottom: $gutter;
    @include grid-col(percentage(math.div(12, 12)));

    @media (min-width: $min-tablet) {
      @include grid-col(percentage(math.div(4, 12)))
    }
  }
}