.front-image-lightbox {
    position: fixed;
    z-index: 2200;
    inset: 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 12px;
    padding: 72px max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    background: rgb(0 0 0 / 88%);
}

.front-image-lightbox[hidden],
.front-image-lightbox button[hidden] {
    display: none;
}

.front-image-lightbox__image {
    display: block;
    grid-column: 2;
    min-width: 0;
    width: 100%;
    max-height: calc(100dvh - 96px - env(safe-area-inset-bottom));
    object-fit: contain;
    justify-self: center;
}

.front-image-lightbox button {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 45%);
    border-radius: 50%;
    background: rgb(0 0 0 / 70%);
    color: #fff;
    cursor: pointer;
    place-items: center;
}

.front-image-lightbox button:hover {
    background: rgb(50 50 50 / 95%);
}

.front-image-lightbox button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.front-image-lightbox__close {
    position: absolute;
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
}

.front-image-lightbox__previous { grid-column: 1; }
.front-image-lightbox__next { grid-column: 3; }

body.has-front-image-lightbox {
    overflow: hidden;
}

@media (max-width: 639px) {
    .front-image-lightbox {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        gap: 0;
        padding: max(72px, env(safe-area-inset-top)) 12px max(88px, env(safe-area-inset-bottom));
    }

    .front-image-lightbox__image {
        grid-column: 1 / -1;
        grid-row: 1;
        max-height: calc(100dvh - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    .front-image-lightbox__previous,
    .front-image-lightbox__next {
        z-index: 1;
        grid-row: 1;
        align-self: end;
        margin-bottom: 12px;
    }

    .front-image-lightbox__previous { grid-column: 1; }
    .front-image-lightbox__next { grid-column: 3; }
}