/* lightbox */
dialog.lb { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
dialog.lb::backdrop { background: rgba(12, 14, 9, 0.95); }
.lb-inner { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 56px 12px 64px; }
.lb img { max-width: min(100%, 1280px); max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5); }
.lb-cap { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: #e8e6dc; font-size: 14px; padding: 0 60px; }
.lb-cap .mono { color: #b6b9a8; font-size: 12.5px; margin-left: 8px; }
.lb button {
  position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.lb button:hover { background: rgba(255, 255, 255, 0.16); }
.lb button:focus-visible { outline: 2px solid #fff; }
.lb .x { top: 10px; right: 10px; }
.lb .prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb .next { right: 10px; top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
  .lb .prev { left: 4px; } .lb .next { right: 4px; }
}