/* The viewer belongs to the viewport, outside animated route containers. */
body > .cp-lightbox {
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  overflow: hidden;
}
body > .cp-lightbox figure { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 0; }
body > .cp-lightbox figure img { display: block; min-height: 0; max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); max-width: 100%; width: auto; height: auto; object-fit: contain; }
body > .cp-lightbox figcaption { flex: 0 0 auto; }
body > .cp-lightbox .cp-lightbox-thumbs { min-width: 0; width: 100%; max-width: 1100px; position: relative; }
@media(max-width:640px) {
  body > .cp-lightbox { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 4px; padding: 56px 8px 16px; }
  body > .cp-lightbox figure img { max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); }
}