@import url("/css/templates/secondary-header.css");
.gallery_header{
    background-image: url("/resources/images/gallery/header.jpg");
}
.gallery_images{
    padding: 3rem 5vw;
    position: relative;
    div.image-preview{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        visibility: hidden;
        transition: 0.2s;
        width: 100%;
        height: 100%;
        opacity: 0;
        div.sticky{
            position: sticky;
            top: 0;
            width: fit-content;
            margin: 0 auto;
            display: flex;
            height: 100dvh;
            width: 100vw;
            justify-content: center;
            align-items: center;
            div.img-container{
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 90%;
                height: 90%;
                img{
                    object-fit: contain;
                    object-position: center;
                    display: block;
                    max-height: 100%;
                    max-width: 100%;
                    scale: 0.9;
                    opacity: 0;
                    transition: 0.3s;
                    filter: saturate(1.1) contrast(1.1);
                    box-shadow: 0 0 25px hsl(0, 0%, 0%, 0.3);
                }   
            }  
        }
        &.--active{
            opacity: 1;
            visibility: visible;
            background-color: hsl(0, 0%, 100%, 0.7);
            .sticky{
                .img-container{
                    img{
                        scale: 1;
                        opacity: 1;
                    }
                }
            }
        }
    }
    div.images-container{
        max-width: 1900px;
        margin: 0 auto;
        gap: 1.5rem;
        column-count: 4;
        div.image-container{
            background-color: hsl(0, 0%, 90%);
            img{
                margin-bottom: 1.5rem;
                width: 100%;
                display: block;
                opacity: 0;
                transition: transform 0.5s, opacity 0.5s, box-shadow 0.2s;
                cursor: pointer;
                object-fit: contain;
                filter: saturate(1.1);
                &.--loaded{
                    opacity: 1;
                    height: auto;
                }
            }
        }
    } 
    @media screen and (max-width: 1500px){
        div.images-container{
            column-count: 3;
        }
    }
    @media screen and (max-width: 1000px){
        div.images-container{
            column-count: 2;
        }
    }
    @media screen and (max-width: 700px){
        div.image-preview{
            div.sticky{
                div.img-container{
                    width: 100%;
                }
            }
        }
        div.images-container{
            column-count: 1;
        }
    }
    @media screen and (max-width: 700px){
        div.images-container{
            column-count: 1;
        }
    }
}