.product-gallery {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  display: grid;
  gap: 15px;

  @media (min-width: 990px) {
    --gallery-width: clamp(480px, round(nearest, calc(50vw, 1px)) 748px);
    grid-template-columns: clamp(64px, 8vw, 100px) 19fr;
    width: round(nearest, calc(var(--gallery-width) / (1 / 1)), 1px); 
  }

  @media (min-width: 1440px) {
    --gallery-width: 748px;
    --carousel-slider-width: 100px;
    --grid-gap: 16px;
    gap: var(--grid-gap);
    grid-template-columns: var(--carousel-slider-width) calc(var(--gallery-width) - var(--carousel-slider-width) - var(--grid-gap));
    width: round(nearest, calc(var(--gallery-width) / (1 / 1)), 1px);  
  }
}

.product-gallery__main-carousel {
  padding: 0;
  width: 100%;
  height: 100%;
  order: -1;

  @media (min-width: 990px) {
    order: initial;
  }
}

.product-gallery__main-carousel .img-snippet {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.product-gallery__main-image,
.product-gallery__video {
  border-radius: 5px;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-gallery__thumbnails {
  width: 100%;
  padding: 0 27px;

  @media (min-width: 990px) {
    padding: 0;
  }
}

.product-gallery__thumbnails .img-snippet {
  @media (min-width: 990px) {
    height: 100%;
  }
}

.product-gallery__thumb-image {
  @media (min-width: 990px) {
    height: 100%;
    object-fit: cover;
  }
}

.product-gallery {

  .swiper-button-next,
  .swiper-button-prev {
    position: absolute;
    border-radius: 0;
    background: #FFFFFF;
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: 100%;
    top: 0;

    &::after {
      font-size: 18px;

      @media (min-width: 990px) {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 30px;
        transform: translate(-50%, -50%) rotate(90deg);
      }
    }

    @media (min-width: 990px) {
      top: auto;
      height: initial;
      width: 100% !important;
      height: 30px;
    }
  }

  .swiper-button-prev {
    left: 0;

    @media (min-width: 990px) {
      top: 0;
    }
  }

  .swiper-button-next {
    right: 0;

    @media (min-width: 990px) {
      bottom: 0;
    }
  }
}