/*
 * Keep the active photograph in the center column even when a gallery has no
 * previous/next controls. Without an explicit grid position a single image is
 * auto-placed in the 74px navigation column and looks like a thumbnail.
 */
.df-media-lightbox > figure {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: min(1440px, 100%);
  height: min(88vh, calc(100vh - 72px));
  height: min(88dvh, calc(100dvh - 72px));
  max-height: none;
  margin: 0 auto;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
}

.df-media-lightbox > figure > img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 112px);
  max-height: calc(100dvh - 112px);
  object-fit: contain;
}

.df-media-lightbox > .previous {
  grid-column: 1;
  grid-row: 1;
}

.df-media-lightbox > .next {
  grid-column: 3;
  grid-row: 1;
}

@media (max-width: 640px) {
  .df-media-lightbox {
    grid-template-columns: minmax(0, 1fr);
    padding: 56px 8px 16px;
  }

  .df-media-lightbox > figure {
    grid-column: 1;
    width: 100%;
    height: calc(100vh - 72px);
    height: calc(100dvh - 72px);
  }

  .df-media-lightbox > figure > img {
    max-height: calc(100vh - 112px);
    max-height: calc(100dvh - 112px);
  }

  .df-media-lightbox > .previous,
  .df-media-lightbox > .next {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(4, 16, 22, .62);
  }

  .df-media-lightbox > .previous {
    left: 8px;
  }

  .df-media-lightbox > .next {
    right: 8px;
  }
}