.product-gallery {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
}

.main-product-swiper {
  flex: 1;
  position: relative;
  width: 100%;
  padding-top: 100%;
}

.swiper-wrapper {
  transform: translate3d(0px, 0px, 0px);
  padding: 20px 0px 0px 0px !important; 
}

.main-product-swiper .swiper-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.side-product-swiper {
  position: relative;
  width: 21%;
  height: calc((100% / 3) * 3 + 24px);
  max-height: 457px;
  overflow: hidden;
}

.side-button-prev{
  top: 15px !important;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  cursor: pointer;
  font-size: 18px;
  color: #333;
}

.side-button-next {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  cursor: pointer;
  font-size: 18px;
  color: #333;
  bottom: -8px !important;
}

.side-button-prev {
  top: 4px;
}

.side-button-next {
  bottom: 4px;
}

.side-product-swiper .swiper-slide {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .side-product-swiper {
    width: 25%;
    height: 377px;
  }

  .side-product-swiper .swiper-slide {
    height: 70px;
  }
}

.thumb-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}

.main-product-swiper .button-prev,
.main-product-swiper .button-next {
  display: none !important;
}

.product-single .product-gallery .side-product-swiper {
    margin-block: min(max(50px, 50 / 1440 * 100vw), 0px) !important;
}

.product-single .product-gallery .main-product-swiper .gallery-item {
  height: auto !important;
}