.ecs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: 56px 72px;
    background: rgba(0, 0, 0, 0.92);
}

.ecs-lightbox[hidden] { display: none; }
.ecs-lightbox__figure { margin: 0; max-width: min(1280px, 100%); max-height: 100%; text-align: center; }
.ecs-lightbox__image { display: block; max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; margin: 0 auto; object-fit: contain; }
.ecs-lightbox__caption { min-height: 28px; padding-top: 12px; color: #fff; font: 500 15px/1.4 Arial, sans-serif; }
.ecs-lightbox__button {
    position: absolute;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font: 400 32px/1 Arial, sans-serif;
    cursor: pointer;
}
.ecs-lightbox__close { top: 16px; right: 18px; }
.ecs-lightbox__previous { left: 18px; top: 50%; transform: translateY(-50%); }
.ecs-lightbox__next { right: 18px; top: 50%; transform: translateY(-50%); }
.ecs-lightbox__button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 700px) {
    .ecs-lightbox { padding: 64px 12px 56px; }
    .ecs-lightbox__image { max-height: calc(100vh - 150px); }
    .ecs-lightbox__previous { left: 8px; }
    .ecs-lightbox__next { right: 8px; }
}