/* Keep the image box at its intrinsic ratio so clipping follows its edges. */
.art-frame,
.modal-image-stage {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
}

.art-frame,
.art-frame:hover,
.modal-image-stage {
  background: #2a2826;
}

.gallery {
  row-gap: clamp(34px, 5vw, 76px);
}

.art-frame {
  padding: clamp(18px, 3vw, 44px);
  border: 1px solid #49413a;
}

.art-frame:hover {
  border-color: var(--brass);
}

.art-frame .zoom {
  background: var(--dark);
  border-color: var(--brass);
  color: var(--light-ink);
}

.art-copy {
  padding-block: clamp(18px, 2.3vw, 30px) 23px;
}

.modal-image-stage {
  height: min(74dvh, 750px);
}

.art-frame img,
.modal-image-stage .modal-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  background: transparent;
}

/* Insets correspond to the photographed borders, not the painted surface. */
img[src$="/mare-0.webp"] {
  clip-path: inset(4.3536% 1.3875% 4.3536% 2.5768%);
}

img[src$="/mare-2.webp"] {
  clip-path: inset(3.7479% 0.6402% 4.7700% 1.2804%);
}

img[src$="/mare-3.webp"] {
  clip-path: inset(0 4.9896% 0.4673% 3.9501%);
}

img[src$="/terra-0.webp"] {
  clip-path: inset(0 0.5961% 0 0.5961%);
}