.story-slider {
  .story-slider-container {
    width: 100%;
    padding-top: 3.3334rem;
    padding-bottom: 6.2223rem;
    position: relative;

    @include from($desktop) {
      padding-left: 3rem;
      padding-right: 3rem;
    }

    @include mobile {
      padding-top: 2.2223rem;
    }
  }

  .story-item {
    width: 100%;
    display: flex;

    @include until($tablet) {
      flex-wrap: wrap;
    }
  }

  .story-item-left {
    width: 69%;
    position: relative;

    @include until($tablet) {
      width: 100%;
    }

    img {
      display: none;
      @include until($tablet) {
        display: block;
      }
    }

    .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center center;
      display: block;

      @include until($tablet) {
        display: none;
      }
    }
  }

  .story-item-right {
    width: 31%;
    background-color: $dark-grey;
    padding: 2.2223rem 1.6667rem;
    position: relative;
    min-height: 19.3334rem;

    @include until($tablet) {
      width: 100%;
      min-height: 0;
      padding: 1.1112rem 0.72223rem 0rem;
    }

    h4 {
      color: $ami-white;
    }

    .cta-container {
      position: absolute;
      left: 0;
      padding-left: 1.6667rem;
      padding-right: 1.6667rem;
      bottom: 40px;
      width: calc(100% - 3.3334rem);

      a {
        font-size: 0.7778rem;
      }
    }
  }

  .swiper-pagination-bullets {
    bottom: 1.9445rem;
    width: 100%;

    @include from($desktop) {
      margin-left: -3rem;
      margin-right: -3rem;
    }

    @include until($tablet) {
      position: relative;
      padding-bottom: 2.7778rem;
      bottom: 0;
      background-color: $dark-grey;
    }
  }

  .swiper-pagination-bullet {
    width: 1.7778rem;
    height: 0.2223rem;
    border-radius: 0;
    margin: 0 0.3334rem;
    transition: background-color $transition-duration ease-in-out;

    &:hover {
      background-color: $dark-yellow;
    }

    &.swiper-pagination-bullet-active {
      background: $ami-yellow;
    }
  }

  .swiper-button {
    width: 1.8334rem;
    height: 1.8334rem;
    border-radius: 100%;
    background-color: $dark-grey;
    position: absolute;
    top: 44%;
    z-index: 10;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    @include tablet-only {
      top: auto;
      bottom: 4%;
      z-index: 20;
    }

    @include until($tablet) {
      top: initial;
      z-index: 15;
      background-color: transparent;
    }

    @include from($tablet) {
      &:hover {
        background-color: $light-black;
        transition: background-color $transition-duration ease-in-out;

        &.swiper-amni-next {
          svg {
            right: 0;
          }

          .arrow-line {
            right: 2;
            left: 0;
            opacity: 1;
          }
        }

        &.swiper-amni-prev {
          svg {
            left: 0;
          }

          .arrow-line {
            left: 2;
            right: 0;
            opacity: 1;
          }
        }
      }
    }

    &.swiper-amni-next {
      right: 0;

      @include until($tablet) {
        right: 0;
      }

      @include from($tablet) {
        svg {
          right: calc(50% - 4px);
        }

        .arrow-line {
          left: -2rem;
        }
      }
    }

    &.swiper-amni-prev {
      left: 0;

      @include until($tablet) {
        left: 0;
      }

      @include from($tablet) {
        svg {
          left: calc(50% - 4px);
        }

        .arrow-line {
          right: -2rem;
        }
      }
    }

    svg {
      width: 0.4445rem;
      display: block;
      position: absolute;
      transition: $transition-duration ease-in-out;
      top: 50%;
      transform: translateY(-50%);
    }

    .arrow-line {
      position: absolute;
      width: 30px;
      height: 2px;
      background-color: $ami-white;
      opacity: 0;
      transition: $transition-duration ease-in-out;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .swiper-container {
    @include mobile {
      background-color: $dark-grey;
    }
  }
}