/* Two contained layers crossfade without changing the dialog's dimensions. */
.photo-dialog .photo-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 72vh;
  background: #f5f7f9;
  overflow: hidden;
}
.photo-dialog .photo-stage > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 72vh;
  object-fit: contain;
}
.photo-dialog .photo-stage > img[hidden] { display: none; }