/**
 * Product gallery: show the whole photo, at the size the photo deserves.
 *
 * The gallery used to crop every photo into a square, which cut the sides off
 * the wide shots that make up most of the catalog (441 of 936 product photos
 * are 3:2, and the AI Photo Studio produces 1536x1024). Now nothing is
 * cropped: the frame follows the photo. A wide shot spans the full width, a
 * vertical one keeps the full height the theme used to give it, capped so it
 * never pushes the rest of the page down.
 *
 * The slider runs with autoHeight so it tracks the current slide.
 */

.images-product .main-slider .swiper-slide .product-popup-link {
  height: auto;
  max-height: 620px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.images-product .main-slider .swiper-slide .product-popup-link img,
.images-product .main-slider .swiper-slide .product-popup-link .product-video,
.images-product .main-slider .swiper-slide .product-popup-link .product-video-poster {
  width: 100%;
  height: auto;
  max-height: 620px;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center center;
}

@media (max-width: 1400px) {
  .images-product .main-slider .swiper-slide .product-popup-link,
  .images-product .main-slider .swiper-slide .product-popup-link img,
  .images-product .main-slider .swiper-slide .product-popup-link .product-video,
  .images-product .main-slider .swiper-slide .product-popup-link .product-video-poster {
    max-height: 540px;
  }
}

@media (max-width: 1199.98px) {
  .images-product .main-slider .swiper-slide .product-popup-link,
  .images-product .main-slider .swiper-slide .product-popup-link img,
  .images-product .main-slider .swiper-slide .product-popup-link .product-video,
  .images-product .main-slider .swiper-slide .product-popup-link .product-video-poster {
    max-height: 460px;
  }
}

/* Tablet and below the gallery is full width, so it can breathe again. */
@media (max-width: 991.98px) {
  .images-product .main-slider .swiper-slide .product-popup-link,
  .images-product .main-slider .swiper-slide .product-popup-link img,
  .images-product .main-slider .swiper-slide .product-popup-link .product-video,
  .images-product .main-slider .swiper-slide .product-popup-link .product-video-poster {
    max-height: 690px;
  }
}