.photo-viewport {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--photo-ratio);
  overflow: hidden;
  margin-inline: auto;
  background: transparent;
}

.photo-viewport > img {
  position: absolute;
  inset: 0 auto auto 0;
  width: 250px;
  height: 300px;
  min-width: 250px;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  margin: 0;
  object-fit: fill;
  transform-origin: 0 0;
  transition: none;
  visibility: hidden;
}

.photo-ready > img { visibility: visible; }
.photo-oval { clip-path: ellipse(50% 50% at center); }

.artwork-card .artwork.photo-viewport {
  aspect-ratio: var(--photo-ratio);
  width: min(100%, calc(30rem * var(--photo-ratio)));
  max-height: none;
  background: transparent;
}

.archive-image:has(.photo-viewport) { background: transparent; }
.archive-image .photo-viewport > img,
.art-dialog .photo-viewport > img {
  width: 250px;
  height: 300px;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  object-fit: fill;
  transition: none;
}

.art-dialog .photo-viewport { width: min(82vw, 900px, calc(70vh * var(--photo-ratio))); }
.dialog-close { z-index: 1; }