[data-vila-lightbox-trigger] { cursor: zoom-in; }
[data-vila-lightbox-trigger]:focus-visible { outline: 3px solid #adc3a6; outline-offset: 4px; }
.vila-lightbox { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: #f3f1e9; background: #101510; overflow: hidden; }
.vila-lightbox::backdrop { background: #080b08ed; }
.vila-lightbox__content { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.vila-lightbox__viewport { width: 100%; height: 100%; display: grid; place-items: center; padding: 72px 84px 82px; }
.vila-lightbox__viewport img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; display: block; box-shadow: 0 24px 80px #0008; user-select: none; -webkit-user-drag: none; touch-action: pan-y; }
.vila-lightbox button { position: absolute; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #ffffff52; border-radius: 50%; color: #fff; background: #141c16bd; cursor: pointer; line-height: 1; font-family: Arial, sans-serif; }
.vila-lightbox button:hover, .vila-lightbox button:focus-visible { background: #e9e5da; color: #172017; outline: none; }
.vila-lightbox__close { top: 18px; right: 22px; font-size: 34px; }
.vila-lightbox__previous, .vila-lightbox__next { top: 50%; transform: translateY(-50%); font-size: 40px; padding-bottom: 7px; }
.vila-lightbox__previous { left: 22px; }
.vila-lightbox__next { right: 22px; }
.vila-lightbox__counter { position: absolute; z-index: 2; top: 34px; left: 50%; transform: translateX(-50%); letter-spacing: .18em; font: 11px Arial, sans-serif; }
.vila-lightbox__caption { position: absolute; z-index: 2; bottom: 30px; left: 80px; right: 80px; margin: 0; text-align: center; font: 16px Georgia, serif; }
@media (max-width: 800px) {
  .vila-lightbox__viewport { padding: 76px 12px 118px; }
  .vila-lightbox__close { top: 16px; right: 16px; }
  .vila-lightbox__counter { top: 36px; }
  .vila-lightbox__previous, .vila-lightbox__next { top: auto; bottom: 18px; transform: none; }
  .vila-lightbox__previous { left: 18px; }
  .vila-lightbox__next { right: 18px; }
  .vila-lightbox__caption { bottom: 78px; left: 24px; right: 24px; font-size: 14px; }
}