:root{
    --transition: .32s ease;
    --whiteFaded: rgba(255, 255, 255, .5);
    --whiteFaded2: rgba(255, 255, 255, .75);
}

.galleryContainer{
    display: grid;
    justify-content: start;
    justify-items: stretch;
    grid-gap: 1.28rem;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, 200px);
}

.galleryLightboxEnabled{
    width: auto;
    height: -webkit-fill-available;
    max-height: 120px;
    object-fit: cover;
    transition: var(--transition);
    border-radius: 4px;

    &:hover, &:focus, &:target{
        opacity: .86;
        cursor: zoom-in;
    }
}

.galleryLightboxContainer{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--whiteFaded2);
    display: grid;
    place-items: center;
    padding: 1rem;
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);

    &.active{
        opacity: 1;
        pointer-events: all;
    }
}

.galleryLightboxWrapper{
    display: grid;
    place-items: center;
    max-width: 90vw;
    max-height: 86vh;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;

    img{
        max-width: 90vw;
        max-height: 80vh;
    }

    .galleryLightboxButton{
        position: absolute;
        background-color: var(--whiteFaded);
        border-radius: 8px;
        display: grid;
        place-items: center;
        border: none;
        cursor: pointer;
        transition: var(--transition);

        &:hover, &:focus, &:target{
            background-color: var(--whiteFaded2);
            outline: none;
        }

        &#prev{
            left: 1%;

            &:hover{
                left: 0.8%;
            }
        }

        &#next{
            right: 1%;

            &:hover{
                right: 0.8%;
            }
        }

        &.inactive{
            opacity: 0;
            pointer-events: none;
        }
    }
}

.galleryLightboxImage{
    width: 100%;
    object-fit: cover;
    cursor: zoom-out;
}

@media (max-width: 1024px){
    .galleryLightboxButton{
        scale: .75;
    }
}

@media (max-width: 768px){
    .galleryContainer{
        display: grid;
        grid-gap: .86rem;
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fill, 120px);
    }

    .galleryLightboxEnabled{
        max-width: 120px;
    }
}