.product-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  max-width: 960px;
}

.product-gallery figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.product-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
}

.product-gallery figcaption {
  padding: 12px 16px;
  font-size: .9rem;
  color: #33404f;
}

.grid-3 > .card {
  display: flex;
  flex-direction: column;
}

.grid-3 > .card img {
  object-position: center 44%;
}

.grid-3 > .card:not(:has(img)) {
  background: #eef4fc;
  justify-content: center;
}