.instruction-lightbox {
    width:min(94vw,1400px);
    max-width:none;
    height:min(94vh,1000px);
    max-height:none;
    margin:auto;
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:10px;
    background:#161310;
    color:#fff;
    box-shadow:0 24px 80px rgb(0 0 0 / 45%);
}

.instruction-lightbox::backdrop {
    background:rgb(0 0 0 / 82%);
}

.instruction-lightbox__figure {
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    width:100%;
    height:100%;
    margin:0;
    padding:42px 64px 24px;
}

.instruction-lightbox__image {
    align-self:center;
    justify-self:center;
    width:auto;
    max-width:100%;
    height:auto;
    max-height:calc(94vh - 120px);
    object-fit:contain;
}

.instruction-lightbox__caption {
    min-height:1.5em;
    margin:16px 0 0;
    color:#fff;
    font-size:15px;
    line-height:1.5;
    text-align:center;
}

.instruction-lightbox__close,
.instruction-lightbox__previous,
.instruction-lightbox__next {
    position:absolute;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgb(255 255 255 / 34%);
    border-radius:999px;
    background:rgb(0 0 0 / 54%);
    color:#fff;
    font:inherit;
    cursor:pointer;
}

.instruction-lightbox__close:hover,
.instruction-lightbox__previous:hover,
.instruction-lightbox__next:hover,
.instruction-lightbox__close:focus-visible,
.instruction-lightbox__previous:focus-visible,
.instruction-lightbox__next:focus-visible {
    background:rgb(110 80 64 / 92%);
}

.instruction-lightbox__close {
    top:12px;
    right:12px;
    width:40px;
    height:40px;
    font-size:28px;
    line-height:1;
}

.instruction-lightbox__previous,
.instruction-lightbox__next {
    top:50%;
    width:44px;
    height:44px;
    transform:translateY(-50%);
    font-size:28px;
    line-height:1;
}

.instruction-lightbox__previous {
    left:12px;
}

.instruction-lightbox__next {
    right:12px;
}

.instruction-lightbox__counter {
    position:absolute;
    top:17px;
    left:18px;
    color:rgb(255 255 255 / 78%);
    font-size:13px;
}

@media (max-width:640px) {
    .instruction-lightbox {
        width:100vw;
        height:100dvh;
        border-radius:0;
    }

    .instruction-lightbox__figure {
        padding:54px 16px 70px;
    }

    .instruction-lightbox__image {
        max-height:calc(100dvh - 150px);
    }

    .instruction-lightbox__previous,
    .instruction-lightbox__next {
        top:auto;
        bottom:14px;
        transform:none;
    }
}