/*
 * MyMappi v675 full-photo viewer.
 * Keep the immersive theater, but present the complete original photo at a
 * calm, premium size instead of expanding high-resolution media edge to edge.
 */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  html body.photo-lightbox-open
    .app-shell
    .photo-lightbox:not(.video-mode)
    .photo-lightbox-gallery-item
    > img,
  html body.photo-lightbox-open
    main.app-shell
    .photo-lightbox:not(.video-mode)
    .photo-lightbox-gallery-item
    > img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(var(--mymappi-visible-height, 100dvh) - 130px) !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  html body.photo-lightbox-open
    .app-shell
    .photo-lightbox:not(.video-mode)
    .photo-lightbox-gallery-item
    > img,
  html body.photo-lightbox-open
    main.app-shell
    .photo-lightbox:not(.video-mode)
    .photo-lightbox-gallery-item
    > img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(84vw, 1180px) !important;
    max-height: min(76vh, 840px) !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
}