[data-zoom] {
    cursor: zoom-in;
}

.zoom-dialog {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 24px;
    border: 0;
    background: rgba(23, 25, 29, .92);
    cursor: zoom-out;
}

    .zoom-dialog[open] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
    }

    .zoom-dialog img {
        max-width: 96vw;
        max-height: calc(100dvh - 80px);
        object-fit: contain;
        background: #f8f7f5;
        box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
    }

    .zoom-dialog p {
        margin: 0;
        font-family: 'JetBrains Mono', monospace;
        font-size: .68rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .6);
    }

html:has(.zoom-dialog[open]) {
    overflow: hidden; /* stops the page scrolling behind the lightbox */
}


/* data-zoom-scroll: tall images (full-page screenshots) open wide and scroll inside the dialog */
.zoom-dialog--scroll {
    overflow-y: auto;
}

    .zoom-dialog--scroll[open] {
        justify-content: flex-start;
    }

    .zoom-dialog--scroll img {
        width: auto;
        max-width: min(96vw, 1400px);
        max-height: none;
        flex-shrink: 0;
    }