.story-slider {
  .story-slider-container {
    width: 100%;
    max-width: 1095px;
    margin: 0 auto;
    padding-top: 60px;
    padding-bottom: 80px;
    position: relative;
  }

  .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: #414141;
      padding: 40px 30px;
      position: relative;
      min-height: 349px;

      @include until($tablet) {
        width: 100%;
        min-height: 0;
        padding-bottom: 80px;
      }

      h4 {
        color: $white;
      }

      p {
        max-width: 75%;
      }

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

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

  .swiper-pagination {
    &.swiper-pagination-bullets {
      bottom: 35px;
      width: 100%;

      @include until($tablet) {
        position: relative;
        padding-bottom: 50px;
        bottom: 0;
        background-color: #414141;
      }
    }

    .swiper-pagination-bullet {
      width: 27px;
      height: 4px;
      border-radius: 0;
      margin: 0 7px;

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

  }

  .swiper-button {
    width: 33px;
    height: 33px;
    border-radius: 100%;
    background-color: #414141;
    position: absolute;
    top: 46%;
    z-index: 10;
    cursor: pointer;

    @include until(1150px) {
      display: none;
    }

    @include until($tablet) {
      display: block;
      top: initial;
      bottom: 120px;
      z-index: 15;
    }

    &.swiper-amni-next {
      right: -53px;

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

      svg {
        right: -13px;
      }
    }

    &.swiper-amni-prev {
      left: -53px;

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

      svg {
        left: 11px;
      }
    }
    svg {
      width: 8px;
      display: block;
      position: relative;
      top: calc(50% - 8.3px);

    }
  }
}