/**
    To use the lightbox add its ID as a target to an enclosing href
    <a href="#img1">
        <img src="https://imgs.xkcd.com/comics/real_programmers.png" class="thumbnail">
    </a>

    The lightbox has to have a blank target to be able to close when clicked
    <a href="#_" class="lightbox" id="img1">
        <img src="https://imgs.xkcd.com/comics/real_programmers.png">
    </a>
 */

.lightbox {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 30%);
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
}

.lightbox-close {
    position: absolute;
    top: var(--spacing20);
    right: var(--spacing20);
}

.lightbox-close:hover {
    opacity: 1;
}

.lightbox-img {
    background: #fff;
    border-radius: var(--border-radius8);
    max-width: 85%;
    max-height: 85%;
}