/* Use the visible portion of the iframe, not its full document height. */
#vehicle-lightbox.karo-lightbox-viewport,
.detail-lightbox.karo-lightbox-viewport {
  position: fixed;
  top: var(--lightbox-top, 0px);
  left: var(--lightbox-left, 0px);
  right: auto;
  bottom: auto;
  width: var(--lightbox-width, 100%);
  height: var(--lightbox-height, 100%);
  box-sizing: border-box;
  padding: 12px;
}

.karo-lightbox-viewport .vehicle-lightbox-content,
.karo-lightbox-viewport .detail-lightbox-dialog {
  width: 100%;
  height: 100%;
  max-width: 1200px;
  max-height: 820px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  box-sizing: border-box;
}

.karo-lightbox-viewport .detail-lightbox-dialog {
  grid-template-rows: minmax(0, 1fr);
}

.karo-lightbox-viewport .detail-lightbox-canvas {
  min-width: 0;
  min-height: 0;
}

.karo-lightbox-viewport .detail-lightbox-canvas:not(.is-zoomed) img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

@media (max-width: 720px) {
  #vehicle-lightbox.karo-lightbox-viewport,
  .detail-lightbox.karo-lightbox-viewport { padding: 6px; }
}