.extra {
  display: block;
  overflow: hidden;
  min-height: 20rem;
  padding: 1.8rem 35% 1.8rem 1.8rem;
  position: relative;

  border-radius: $radius;
  background-repeat: no-repeat;
  background-position: right -40px top 50%;
  background-size: auto 115%;

  text-decoration: none;

  &--gray {
    background-color: #E8EDF0;
    background-image: url("/shop/images/extra-gray.svg");
  }

  &--orange {
    background-color: #FFC5A0;
    background-image: url("/shop/images/extra-orange.svg");
  }

  &--h100p {
    height: 100%;
  }

  &--md {
    padding: 2.4rem 35% 2.4rem 2.4rem;

    .extra__title {
      margin-bottom: 2rem;

      font-size: 2.4rem;

      @include media-breakpoint-down(md) {
        font-size: 2rem;
      }
    }

    .extra__price {
      font-size: 2.8rem;

      @include media-breakpoint-down(md) {
        font-size: 2rem;
      }
    }

    .extra__old-price {
      font-size: 1.8rem;
    }

    @include media-breakpoint-down(md) {
      padding-left: 1.2rem;
    }
  }

  &--lg {
    padding: 4.8rem 35% 4.8rem 4.8rem;

    @include media-breakpoint-down(lg) {
      padding-left: 3rem;
      padding-bottom: 3rem;
    }

    @include media-breakpoint-down(md) {
      padding-left: 1.2rem;
    }

    .extra__title,
    .extra__price {
      font-size: 3.4rem;
      text-transform: uppercase;

      @include media-breakpoint-down(xxl) {
        font-size: 2.4rem;
      }

      @include media-breakpoint-down(md) {
        font-size: 2rem;
        text-transform: none;
      }
    }

    .extra__img {
      max-width: 31rem;

      @include media-breakpoint-down(xxl) {
        max-width: 21rem;
      }

      @include media-breakpoint-down(md) {
        max-width: 15rem;
      }
    }
  }

  &--column {
    display: flex;
    flex-direction: column;
  }
}

.extra__title {
  margin-bottom: 1.6rem;
  position: relative;
  z-index: 2;

  font-size: 1.8rem;
  line-height: 1.25;
  color: $dark;
  font-weight: 600;
}

.extra__price {
  margin-bottom: 5px;
  position: relative;
  z-index: 2;

  font-size: 2rem;
  line-height: 1.1;
  color: $red;
  font-weight: 600;
}

.extra__old-price {
  display: block;
  position: relative;
  z-index: 2;

  color: $dark;
  font-size: 1.4rem;
}

.extra__img {
  display: block;
  max-width: 14rem;
  pointer-events: none;

  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}

.extra__content {
  margin-top: auto;
}