.slider-numbers {
  padding-top: 150px;
  max-width: 1700px;
  margin: 0 auto;
  width: 100%;
  padding-bottom: 130px;
  padding-right: 10px;
  padding-left: 10px;

  @include breakpoint-down('deskL') {
    max-width: 1360px;
  }

  @include breakpoint-down('deskM') {
    max-width: 1286px;
    padding-top: 135px;
    padding-bottom: 138px;
  }

  @include breakpoint-down('deskS') {
    max-width: 688px;
    padding-top: 84px;
  }

  @include breakpoint-down('tabM') {
    width: 100%;
    padding: 10px;
    padding-top: 84px;
    padding-bottom: 65px;
  }

  &__swiper {
    overflow: unset;
    width: 100%;
    height: 800px;

    @include breakpoint-down('deskL') {
      height: 620px;
    }

    @include breakpoint-down('deskM') {
      height: 576px;
    }

    @include breakpoint-down('deskS') {
      height: 403px;
    }

    @include breakpoint-down('tabM') {
      height: 560px;
    }
  }

  &__wrapper {
    overflow: hidden;
    padding-bottom: 150px;
  }

  &__slide {
    opacity: 0.99 !important;
    transition: .5s ease-out;

    .slide-numbers--one, .slide-numbers--two {

      &:not(.swiper-slide-prev) {
        transform: translateY(-102%);
      }

      &:not(.swiper-slide-active) {
        transform: translateY(-102%);
      }

      .swiper-slide-active {
        transform: translateY(0);
      }
    }

    &.swiper-slide-duplicate-active, &.swiper-slide-active {
      opacity: 1 !important;

      .slide-numbers {
        transform: translateY(0);
        transition: .5s ease-out;
      }
    }

    &.swiper-slide-prev, &.swiper-slide-duplicate-prev {

      .slide-numbers {
        transform: translateY(-102%);
        transition: .5s ease-out;
      }
    }

    &.swiper-slide-next, &.swiper-slide-duplicate-next {

      .slide-numbers {
        transition: .5s ease-out;
        transform: translateY(50px);

        @include breakpoint-down('deskS') {
          transform: translateY(42px);
        }

        @include breakpoint-down('tabM') {
          transform: translateY(26px);
        }
      }
    }

    &--one {
      z-index: 3;
    }

    &--two {
      z-index: 2;
    }

    &--three {
      z-index: 1;
    }
  }
}