[data-controller~='common--swiper-double'] {
  .swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;

      background-size: cover;
      background: #fff center;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }

  .firstSwiperContainer {
    position: relative;

    .mySwiper {
      height: 80%;
      width: 80%;
    }

    .swiper-button-prev,
    .swiper-button-next {
      position: absolute;
      top: 50%;
      z-index: 10;
    }
  }

  .mySwiperThumbs {
    height: 20%;
    box-sizing: border-box;
    padding: 30px 0;

    .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }

    .swiper-slide-thumb-active {
      opacity: 1;
    }
  }
}