.product-gallery { display: flex; isolation: isolate; height: min(900px, 46vw);
  padding: 56px max(28px, calc((100vw - 1840px) / 2)) 72px;
  background: #303738; }
.product-gallery-card { position: relative; flex: 1 1 0; min-width: 60px; height: 100%;
  overflow: hidden; padding: 0; border: 1px solid #ccd7d8; border-radius: 6px;
  background: #181c1e; box-shadow: 0 12px 28px #172c3033; cursor: pointer;
  transform: translateY(14px) scale(.96);
  transition: flex-grow .55s cubic-bezier(.22, 1, .36, 1),
    transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s; }
.product-gallery-card + .product-gallery-card { margin-left: -34px; }
.product-gallery-card.is-active { z-index: 2; flex-grow: 12;
  transform: translateY(-14px); box-shadow: 0 26px 52px #172c304d; }
.product-gallery-card:focus-visible { outline: 3px solid #156d65; outline-offset: 4px; }
.product-gallery-card img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: filter .4s ease; }
.product-gallery-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: #aebbb870; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  transition: opacity .4s ease; }
.product-gallery-card.is-active::after { opacity: 0; }
.product-gallery-card.is-active img { object-fit: contain; }
@media (max-width: 700px) {
  .product-gallery { height: clamp(180px, 44vw, 330px); padding: 32px 14px 48px; }
  .product-gallery-card { min-width: 34px; transform: translateY(8px) scale(.97); }
  .product-gallery-card + .product-gallery-card { margin-left: -8px; }
  .product-gallery-card.is-active { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .product-gallery-card, .product-gallery-card img, .product-gallery-card::after { transition: none; }
}