<section class="block-product">
   <div class="block-product__container">
      <div class="block-product__content">
         <div class="block-product__img">
            <div thumbsSlider="" class="swiper productCardThumb">
               <div class="swiper-wrapper">
                  <div class="swiper-slide">
                     <div class="block-product__thumb">
                        <img alt="" src="https://static.lolkot.ru/lolmixer/images/5be2a7da7e4f1.jpg" data-scrollto="#item-1">
                     </div>
                  </div>
                  <div class="swiper-slide">
                     <div class="block-product__thumb">
                        <img alt="" src="https://static.lolkot.ru/lolmixer/images/5be2a7da7e4f1.jpg" data-scrollto="#item-2">
                     </div>
                  </div>
                  <div class="swiper-slide">
                     <div class="block-product__thumb">
                        <img alt="" src="https://static.lolkot.ru/lolmixer/images/5be2a7da7e4f1.jpg" data-scrollto="#item-3">
                     </div>
                  </div>
                  <div class="swiper-slide">
                     <div class="block-product__thumb">
                        <img alt="" src="https://static.lolkot.ru/lolmixer/images/5be2a7da7e4f1.jpg" data-scrollto="#item-4">
                     </div>
                  </div>
                  <div class="swiper-slide">
                     <div class="block-product__thumb">
                        <img alt="" src="https://static.lolkot.ru/lolmixer/images/5be2a7da7e4f1.jpg" data-scrollto="#item-5">
                     </div>
                  </div>
                  <div class="swiper-slide">
                     <div class="block-product__thumb">
                        <img alt="" src="https://static.lolkot.ru/lolmixer/images/5be2a7da7e4f1.jpg" data-scrollto="#item-6">
                     </div>
                  </div>
                  <div class="swiper-slide">
                     <div class="block-product__thumb">
                        <img alt="" src="https://static.lolkot.ru/lolmixer/images/5be2a7da7e4f1.jpg" data-scrollto="#item-7">
                     </div>
                  </div>
               </div>
            </div>
            <div class="swiper productCard">
               <div class="swiper-wrapper">
                  <div class="swiper-slide">
                     <div class="block-product__slide">
                        <div class="swiper-zoom-container">
                           <img alt="" src="https://static.lolkot.ru/lolmixer/images/5be2a7da7e4f1.jpg" id="item-1">
                        </div>
                     </div>
                  </div>
                  <div class="swiper-slide">
                     <div class="block-product__slide">
                        <div class="swiper-zoom-container">
                           <img alt="" src="https://static.lolkot.ru/lolmixer/images/5be2a7da7e4f1.jpg" id="item-2">
                        </div>
                     </div>
                  </div>
                  <div class="swiper-slide">
                     <div class="block-product__slide">
                        <div class="swiper-zoom-container">
                           <img alt="" src="https://static.lolkot.ru/lolmixer/images/5be2a7da7e4f1.jpg" id="item-3">
                        </div>
                     </div>
                  </div>
                  <div class="swiper-slide">
                     <div class="block-product__slide">
                        <div class="swiper-zoom-container">
                           <img alt="" src="https://static.lolkot.ru/lolmixer/images/5be2a7da7e4f1.jpg" id="item-4">
                        </div>
                     </div>
                  </div>
                  <div class="swiper-slide">
                     <div class="block-product__slide">
                        <div class="swiper-zoom-container">
                           <img alt="" src="https://static.lolkot.ru/lolmixer/images/5be2a7da7e4f1.jpg" id="item-5">
                        </div>
                     </div>
                  </div>
                  <div class="swiper-slide">
                     <div class="block-product__slide">
                        <div class="swiper-zoom-container">
                           <img alt="" src="https://static.lolkot.ru/lolmixer/images/5be2a7da7e4f1.jpg" id="item-6">
                        </div>
                     </div>
                  </div>
                  <div class="swiper-slide">
                     <div class="block-product__slide">
                        <div class="swiper-zoom-container">
                           <img alt="" src="https://static.lolkot.ru/lolmixer/images/5be2a7da7e4f1.jpg" id="item-7">
                        </div>
                     </div>
                  </div>
               </div>
               <div class="swiper-pagination"></div>
            </div>
         </div>
         <div class="block-product__info">
            <p>info</p>
         </div>
      </div>
   </div>
</section>

html,
body {
  position: relative;
  height: 100%;
}

main {
  margin-top: 70px;
}

.block-breadcrumbs {
  padding: 50px 0px;
}

.block-product {
  padding: 50px;

  &__content {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  &__img {
    width: 75%;
    display: flex;
    justify-content: space-between;
  }

  &__info {
    width: 20%;
    background-color: blue;
    height: 400px;
    position: sticky;
    top: 100px;
  }

  &__thumbs {}

  &__slider {}

  &__slide {
    cursor: zoom-in;
    overflow: hidden;

    img {
      height: 700px !important;
    }
  }
}

.swiper {
  width: 100%;
  // height: 100vh;
  height: 100%;
}

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

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

// .productCard .swiper-slide {
//   width: auto;
//   height: auto !important;
// }

.productCardThumb {
  position: sticky;
  top: 100px;
  width: 75px;
  height: max-content;
}

.productCardThumb .swiper-slide-thumb-active {
  filter: brightness(0.9) !important;
  transition: 0.2s;

  img {
    border-radius: 10px;
  }
}

.productCardThumb .swiper-slide {
  filter: brightness(1);
  width: 65px;
  height: auto !important;
}

.productCardThumb .swiper-slide:last-child {
  margin-bottom: 0 !important;
}

const productCardThumb = new Swiper('.productCardThumb', {
    slidesPerView: 'auto',
    direction: 'vertical',
    spaceBetween: 10,
    freeMode: {
        enabled: true
    },
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
});

const productCard = new Swiper('.productCard', {
    zoom: true,
    slidesPerView: 'auto',
    direction: 'vertical',
    spaceBetween: 30,
    thumbs: {
        swiper: productCardThumb,
    },
    freeMode: true,
});

/* gw-scrollto */

let scrollBtns = document.querySelectorAll("[data-scrollto]");
scrollBtns.forEach((element, index) => {
    element.addEventListener("click", function() {
        let target = this.dataset.scrollto;
        let offset = this.dataset.scrolltoOffset || 0;
        scrollGo(target, offset);
        document.dispatchEvent(new Event("scrollTo"));
    });
});

function scrollGo(target, offset) {
    let el = document.querySelector(target);
    if (!!!el) return;
    let coords = el.getBoundingClientRect();
    window.scrollTo({
        top: coords.top + window.scrollY + parseInt(offset || 0),
        behavior: "smooth",
    });
}