.slider-responsibility {

  &__row-title {
    padding: 96px 0;
    background: linear-gradient(360deg, #FFFFFF 0%, #EFF3F7 100%);

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

    @include breakpoint-down('deskM') {
      padding: 69px 0;
    }

    @include breakpoint-down('deskS') {
      padding: 64px 0;
    }

    @include breakpoint-down('tabM') {
      padding: 46px 0;
    }
  }

  &__title {
    max-width: 779px;
    text-align: center;
    margin: 0 auto;

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

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

  }

  &__inner {
    padding: 96px 0 64px 0;

    @include breakpoint-down('deskM') {
      padding: 88px 0 58px 0;
    }

    @include breakpoint-down('deskS') {
      padding: 64px 0;
    }

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

    &-title {
      color: $green;
      margin-bottom: 16px;
      text-align: center;

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

    &-desc {
      max-width: 780px;
      margin: 0 auto 16px;
      text-align: center;

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

      @include breakpoint-down('deskS') {
        max-width: 511px;
      }
    }
  }

  &__video--sustainability {
    width: 580px;
    height: 582px;
    display: block;

    @include breakpoint-down('deskL') {
      width: 460px;
      height: 462px;
    }

    @include breakpoint-down('deskS') {
      width: 334px;
      height: 335px;
    }

    @include breakpoint-down('tabM') {
      max-width: 334px;
      width: 100%;
      height: 335px;
      max-height: 335px;
    }
  }

  &__swiper {
    width: 100%;

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

  &__slider-content {
    display: flex;
    position: relative;

    @include breakpoint-down('tabM') {
      flex-direction: column;
    }

    .pagination {
      position: absolute;
      bottom: -20px;
    }
  }

  &__wrapper {
    width: 100%;
  }

  &__slide {
    display: flex;
    align-items: center;
    opacity: 0;
    transition: .3s ease;
    background: $white;

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

      .slide-responsibility {
        top: 0;
        transition: .4s ease;
        transition-delay: 0s;
      }
    }

    //&--last {
    //  &.swiper-slide-next {
    //    .slide-responsibility {
    //      top: -150px;
    //      transition: .4s ease;
    //      transition-delay: 0s;
    //    }
    //  }
    //
    //  &.swiper-slide-active {
    //    .slide-responsibility {
    //      top: 0;
    //      transition: .4s ease;
    //      transition-delay: 0s;
    //    }
    //  }
    //
    //  &:not(.swiper-slide-active) {
    //    .slide-responsibility {
    //      top: 150px;
    //      transition: .4s ease;
    //      transition-delay: 0s;
    //    }
    //  }
    //}

    &.swiper-slide-prev {
      opacity: 1;
      transition: .3s ease;

      .slide-responsibility {
        top: 150px;
        transition: .4s ease;
        transition-delay: 0s;
      }
    }
  }

  &__pagination {
    justify-content: flex-start !important;
    pointer-events: none;

    @include breakpoint-down('tabM') {
      display: flex;
      justify-content: center !important;
      bottom: auto !important;
      top: 15px !important;
    }
  }
}