/* Scene photos fill a fixed frame. They are never stretched.
   A file at the slot's pixel size covers the frame edge to edge.
   Product jars stay whole inside a square. */

.photo-frame picture,
.product-visual picture,
.quick-card-media picture {
  display: contents;
}

.photo-layer {
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center center;
}

.hero-photo .photo-layer {
  height: 100%;
  top: 0;
  transform: none;
}

.story-photo {
  aspect-ratio: 1 / 1;
  height: auto;
}

.season-picture {
  aspect-ratio: 3 / 2;
  height: auto;
}

@media (min-width: 851px) {
  .visit-card {
    aspect-ratio: 11 / 5;
    min-height: 0;
  }
}

.product-visual {
  aspect-ratio: 1 / 1;
  height: auto;
}

.product-visual .jar,
.quick-card-media img,
.modal-visual > img,
#quiz-result-image {
  object-fit: contain;
  object-position: center;
}

@media (max-width: 760px) {
  .quick-card-media {
    border-radius: 18px;
  }

  .quick-card-media img,
  .quick-card:hover .quick-card-media img {
    width: auto;
    height: 78%;
    max-width: 86%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    object-position: center center;
    border-radius: 12px;
    transform: none;
  }
}

.product-visual:has(.jar-photo) {
  aspect-ratio: 4 / 5;
}

.product-visual .jar.jar-photo {
  object-fit: cover;
  transform: none;
}