/* Match Explore's balanced rows while keeping complete photos in frame. */
.media-page .full-gallery { display: block; }
.media-page .gallery-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.media-page .gallery-mosaic.is-ready { display: block; }
.media-page .gallery-mosaic__row { display: flex; gap: 16px; margin-bottom: 16px; }
.media-page .gallery-mosaic__row:last-child { margin-bottom: 0; }
.media-page .gallery-mosaic__row button { flex: 0 0 auto; height: 100%; }
.media-page .gallery-mosaic__row img { width: 100%; height: 100%; object-fit: contain; }
.media-page .gallery-mosaic button:focus-visible { outline: 3px solid var(--deep-pacific); outline-offset: 4px; }
@media (max-width: 700px) {
  .media-page .gallery-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .media-page .gallery-mosaic__row { gap: 12px; margin-bottom: 12px; }
}

/* Contain full-bleed section backgrounds within the viewport. */
.media-page main { overflow-x: clip; }

/* Let the existing 4:3 section frame override the portrait HTML height. */
.media-page .media-progress > img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 62%; }