/* Keep the full photograph visible at its original proportions. */
.hero .hero-art {
  display: flex;
  flex-direction: column;
  align-self: center;
  min-width: 0;
  min-height: 0;
  height: auto;
}
.hero .hero-art > img {
  position: static;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  max-height: min(650px, 70vh);
  max-height: min(650px, 70svh);
  padding: clamp(9px, 1.6vw, 22px);
  object-fit: contain;
  object-position: center;
}
.hero .hero-art::after {
  content: none;
}
.hero-art > .caption {
  position: static;
  flex-wrap: wrap;
  margin: 0 clamp(9px, 1.6vw, 22px) clamp(9px, 1.6vw, 22px);
}

.card .picture,
.card-image {
  min-width: 0;
  max-height: 62vh;
  max-height: 62svh;
}
.card .picture img,
.card-image img,
.thumbs img {
  min-width: 0;
  max-width: 100%;
  object-fit: contain;
}
.product-layout > *,
.pdp > * {
  min-width: 0;
}
.image-button .product-image,
.gallery-main {
  height: min(560px, 66vh);
  height: min(560px, 66svh);
}
.image-button .product-image,
.gallery-main img {
  box-sizing: border-box;
  min-height: 0;
  max-width: 100%;
  padding: clamp(9px, 2vw, 25px);
  object-fit: contain;
}
.gallery-main {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}
.pdp .thumbs {
  flex-wrap: wrap;
}

.social-gallery .social-tile img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(420px, 65vh);
  max-height: min(420px, 65svh);
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--paper, #f4f2ee);
}
.portrait-frame {
  aspect-ratio: auto;
}
.portrait-frame .founder-portrait,
.portrait-frame .editorial-photo.founder-portrait,
.home-stock + .story .portrait-frame .founder-portrait {
  width: 100%;
  height: auto;
  max-height: 72vh;
  max-height: 72svh;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  transform: none;
}

dialog.lightbox[open] {
  box-sizing: border-box;
  display: grid;
  grid-template: auto minmax(0, 1fr) / minmax(0, 1fr) auto;
  gap: 10px 14px;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  overflow: hidden;
}
dialog.lightbox[open] > p {
  position: static;
  grid-area: 1 / 1;
  align-self: center;
  max-width: none;
  margin: 0;
  overflow-wrap: anywhere;
}
dialog.lightbox[open] > .lightbox-close {
  position: static;
  grid-area: 1 / 2;
  min-height: 44px;
  white-space: nowrap;
}
dialog.lightbox[open] > img {
  display: block;
  grid-area: 2 / 1 / 3 / -1;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 700px) {
  .image-button .product-image,
  .gallery-main {
    height: min(430px, 60vh);
    height: min(430px, 60svh);
  }
}

@media (max-width: 420px) {
  .card .quick-cart {
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: 100%;
    padding-inline: 9px !important;
    white-space: normal;
  }
}