.slider-history {
  padding-top: 180px;
  padding-bottom: 130px;
  overflow: hidden;

  @include breakpoint-down('deskM') {
    padding-top: 150px;
    padding-bottom: 99px;
  }

  @include breakpoint-down('deskS') {
    padding-top: 124px;
    padding-bottom: 42px;
  }

  @include breakpoint-down('tabM') {
    padding-top: 99px;
    padding-bottom: 121px;
  }

  &__back {
    margin-bottom: 16px;

    @include breakpoint-down('tabM') {
      margin-bottom: 8px;
    }
  }

  &__title {
    margin-bottom: 44px;

    @include breakpoint-down('deskM') {
      font-size: 49px;
    }

    @include breakpoint-down('deskS') {
      font-size: 43px;
      line-height: 110%;
      margin-bottom: 26px;
    }

    @include breakpoint-down('tabM') {
      font-size: 31px;
      line-height: 140%;
    }
  }

  &__wrapper {
    padding-top: 72px;

    @include breakpoint-down('deskL') {
      padding-top: 130px;
    }

    @include breakpoint-down('deskM') {
      padding-top: 68px;
    }

    @include breakpoint-down('deskS') {
      padding-top: 36px;
    }

    @include breakpoint-down('tabM') {
      padding-top: 28px;
    }
  }

  &__slide {
    opacity: 0;
    transition: .3s ;
    background: $white;

    &.swiper-slide-duplicate-active, &.swiper-slide-active {
      opacity: 1;
      transition: .3s ;
    }

    &-title {
      margin-bottom: 16px;
      max-width: 780px;
      position: relative;
      left: 50px;
      opacity: 0;

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

    &-desc {
      max-width: 780px;
      position: relative;
      left: 100px;
      opacity: 0;

      ul {
        list-style: disc;
        padding-left: 18px;

        li {
          margin-bottom: 24px;

          @include breakpoint-down('deskS') {
            margin-bottom: 16px;
          }

          &:last-of-type {
            margin-bottom: 0;
          }

          &::marker {
            color: $red;
            font-size: 20px;
          }
        }
      }

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

  &__year {
    display: flex;
    align-items: center;
    margin-bottom: 37px;
    position: relative;
    left: 0;
    transition: .6s;

    @include breakpoint-down('deskL') {
      margin-bottom: 5px;
    }

    @include breakpoint-down('deskM') {
      margin-bottom: 18px;
    }

    @include breakpoint-down('deskS') {
      margin-bottom: 13px;
    }

    @include breakpoint-down('tabM') {
      margin-bottom: 9px;
    }

    &-animation {
      transform: translateX(100px);
    }

    &-item {
      margin-right: 100px;
      display: flex;
      align-items: center;
      position: relative;
      cursor: pointer;

      @include breakpoint-down('deskM') {
        margin-right: 77px;
      }

      @include breakpoint-down('deskS') {
        margin-right: 58px;
      }

      @include breakpoint-down('tabM') {
        margin-right: 31px;
      }

      span {
        font-family: 'Russo One', sans-serif;
        font-weight: 400;
        font-size: 137px;
        line-height: 113px;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: black;
        background: url("../assets/resource/TextBG.png");
        color: #fff;
        text-align: center;
        transition: .7s .4s;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;

        @include breakpoint-down('deskL') {
          line-height: 145px
        }

        @include breakpoint-down('deskM') {
          font-size: 110px;
          line-height: 115px;
        }

        @include breakpoint-down('deskS') {
          font-size: 90px;
          line-height: 80px;
        }

        @include breakpoint-down('tabM') {
          font-size: 44px;
          line-height: 43px;
        }
      }

      &:last-of-type {
        margin-right: 0;
      }

      &.active {
        .bg {
          background-position: -150px !important;
          transition: .4s .6s;
        }
      }
    }
  }
}