.mg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(4 * var(--vh, 1vh)) calc(4 * var(--vw, 1vw));
  background: rgba(3, 6, 20, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: mg-lightbox-in 220ms var(--ease-standard);
}
.mg-lightbox[hidden] { display: none; }

@keyframes mg-lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.mg-lightbox-stage {
  position: relative;
  max-width: min(calc(92 * var(--vw, 1vw)), 1400px);
  max-height: min(calc(88 * var(--vh, 1vh)), 900px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mg-lightbox-photo {
  max-width: 100%;
  max-height: calc(88 * var(--vh, 1vh));
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, .55),
              0 0 0 1px rgba(246, 232, 190, .18);
  animation: mg-lightbox-photo-in 320ms var(--ease-decel);
}

@keyframes mg-lightbox-photo-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

.mg-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(20, 28, 52, .72);
  border: 1px solid rgba(214, 232, 255, .22);
  color: #f0e8d0;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 200ms var(--ease-standard),
              transform 200ms var(--ease-standard),
              background 200ms var(--ease-standard);
}
.mg-lightbox-close:hover {
  border-color: rgba(246, 232, 190, .7);
  background: rgba(30, 42, 76, .85);
  transform: scale(1.05);
}

.mg-lightbox-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  padding: 0 24px;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: .28em;
  color: rgba(226, 214, 180, .8);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
  pointer-events: none;
}

@media (max-width: 640px) {
  .mg-lightbox { padding: calc(2 * var(--vh, 1vh)) calc(2 * var(--vw, 1vw)); }
  .mg-lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; }
  .mg-lightbox-caption { bottom: 14px; font-size: 10px; letter-spacing: .22em; }
}