/* Keep editorial photography readable as a complete frame on desktop screens. */
@media (min-width: 801px) {
  :root {
    --article-image-max: min(78vh, 780px, calc(100vh - 150px));
    --article-image-max: min(78dvh, 780px, calc(100dvh - 150px));
  }

  /* Shared editorial articles: preserve the complete photograph and its ratio. */
  .editorial-article .ea-hero-image img,
  .editorial-article .ea-media:not(.ea-media-crop) img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: var(--article-image-max);
    margin-inline: auto;
    object-fit: contain;
  }

  .editorial-article .ea-media:not(.ea-media-crop) {
    min-height: 0;
  }

  /* The interiors feature uses full-width asymmetric layouts; only the image
     itself is reduced, while its grid position and caption remain unchanged. */
  .interiors-feature figure img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: var(--article-image-max);
    margin-inline: auto;
    object-fit: contain;
  }

  /* Notes images are intentionally wide, but should still fit in one view. */
  .notes-essay .notes-hero-image img,
  .notes-essay .notes-image img {
    width: auto;
    max-width: 100%;
    max-height: var(--article-image-max);
    margin-inline: auto;
    object-fit: contain;
  }

  /* The fashion article slices each source triptych into one outfit. Keep the
     crop, but cap each portrait so the complete look fits on a laptop screen. */
  .interview-edit .ie-hero-image {
    width: auto;
    max-width: 100%;
    max-height: var(--article-image-max);
    margin-inline: auto;
    object-fit: contain;
  }

  .interview-edit .look-image:not(.look-image--landscape):not(.look-image--cinematic) {
    width: min(100%, 39vh, 390px, calc(50vh - 75px));
    width: min(100%, 39dvh, 390px, calc(50dvh - 75px));
    height: auto;
    min-height: 0;
    max-height: var(--article-image-max);
    aspect-ratio: 1 / 2;
    justify-self: center;
  }

  .interview-edit .look-image--landscape,
  .interview-edit .look-image--cinematic {
    max-height: var(--article-image-max);
  }

  /* Hair feature hero and its one oversized lead card. */
  .issue-page .issue-hero-real {
    height: min(72vh, 720px, calc(100vh - 150px));
    height: min(72dvh, 720px, calc(100dvh - 150px));
    min-height: 0;
  }

  .issue-page .editorial-grid figure:first-child img {
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: var(--article-image-max);
    margin-inline: auto;
  }
}