.reference-gallery figure { cursor: zoom-in; }

.reference-lightbox {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(2, 8, 16, 0.91);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.reference-lightbox.is-open { opacity: 1; visibility: visible; }
.reference-lightbox__frame { position: relative; width: min(1100px, 100%); max-height: 100%; text-align: center; }
.reference-lightbox__image { display: block; width: auto; max-width: 100%; max-height: calc(100vh - 112px); margin: 0 auto; border: 1px solid rgba(231, 185, 83, 0.42); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.62); object-fit: contain; }
.reference-lightbox__caption { margin: 11px 60px 0; color: #f5f3ee; font-size: 0.85rem; }
.reference-lightbox button { position: absolute; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(231, 185, 83, 0.52); border-radius: 50%; background: rgba(7, 18, 31, 0.82); color: #f0c567; cursor: pointer; font: 500 1.65rem/1 Arial, sans-serif; transition: background 0.2s ease, transform 0.2s ease; }
.reference-lightbox button:hover { background: #d9a847; color: #07111f; transform: scale(1.06); }
.reference-lightbox__close { top: 0; right: 0; }
.reference-lightbox__previous, .reference-lightbox__next { top: 50%; transform: translateY(-50%); }
.reference-lightbox__previous { left: -58px; }
.reference-lightbox__next { right: -58px; }
.reference-lightbox__previous:hover, .reference-lightbox__next:hover { transform: translateY(-50%) scale(1.06); }

@media (max-width: 760px) {
  .reference-lightbox { padding: 18px; }
  .reference-lightbox__image { max-height: calc(100vh - 138px); }
  .reference-lightbox__caption { margin: 10px 42px 0; font-size: 0.76rem; }
  .reference-lightbox button { width: 36px; height: 36px; font-size: 1.4rem; }
  .reference-lightbox__previous { left: 0; }
  .reference-lightbox__next { right: 0; }
}