.whippet-product-gallery .content {
  position: relative;
}
.whippet-product-gallery .content .image {
  display: block;
  aspect-ratio: var(--max-aspect-ratio);
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
  width: 100%;
}
.whippet-product-gallery .content .badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 80px;
  height: 80px;
}
.whippet-product-gallery--many {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--thumbnail-size, 50px), 1fr));
  gap: 10px 5px;
}
.whippet-product-gallery--many details {
  display: grid;
  grid-column: 1/-1;
  grid-row: 1/span 2;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}
.whippet-product-gallery--many details .thumbnail {
  grid-column: var(--n)/span 1;
  grid-row: 2;
  cursor: pointer;
  z-index: var(--n);
  opacity: 0.6;
  transition: opacity 0.1s linear;
}
.whippet-product-gallery--many details .thumbnail:hover {
  opacity: 0.8;
}
.whippet-product-gallery--many details .thumbnail::marker {
  content: "";
}
.whippet-product-gallery--many details .thumbnail::-webkit-details-marker {
  display: none;
}
.whippet-product-gallery--many details .thumbnail img {
  display: block;
  border-radius: 4px;
  width: 100%;
}
.whippet-product-gallery--many details[open] .thumbnail {
  opacity: 1;
}
.whippet-product-gallery--many details::details-content {
  grid-row: 1;
  grid-column: 1/-1;
}
.whippet-product-gallery--many details:not([open])::details-content {
  display: none;
}
@media only screen and (min-width: 768px) {
  .whippet-product-gallery--many {
    --thumbnail-size: 75px;
  }
}