@keyframes fadeIn { 
    from { opacity: 0; }
    to { opacity: 1; }
}

.gallery {

    .gallery-content {
        &.masonry {
            column-count: auto;
            column-gap: 1em;

            .gallery-img {
                display: block;
                object-fit: cover;
                &::before {
                    content: "";
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(98, 220, 50, 0.5);
                }
            }

            figure {
                margin: 0;
                max-width: max-content;
                break-inside: avoid;
            }
            
            .masonry-item.invisible {
                visibility: hidden;
            }
        }

        &.grid {
            --grid-columns: auto-fill;
            display: grid; 
            justify-items: center;
            margin: 0;
            padding: 0;

            figure {
                font-size: 1.2rem;
                height: 0;
                padding-bottom: 100%;
                width: 100%;
                text-align: center;
                background-color: white;
                color: #d9d9d9;
                
                .gallery-img {
                    width: 100%;
                    aspect-ratio: 1 / 1;
                    object-fit: cover;
                    transition: opacity 0.25s ease-in-out;
                }
            }
        }

        figure {
            position: relative;
            display: block;
            max-width: 800px;
            animation: fadeIn 0.8s ease-in-out;
            will-change: opacity;

            img {
                filter:brightness( calc( var( --brightness ) / 100 ));
            }

            &.hidden {
                display: none;
            }

            .overlay {
                position: absolute;
                height: 100%;
                width: 100%;
                z-index: 1;
            }
        }

    }
    .gallery-navigation {
        display: flex;
        flex-wrap: wrap;
        gap: 50px;
        justify-content: center;
        margin-top: 35px; 

        div {
            &.hide {
                display: none;
            }
            text-align:center;
        }
        .load-less {
            display: none;
        }

        .navigation-button {
            background-color: var(--e-global-color-secondary);
            color: white;
        }
    }

    .caption-mouseover {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 2;
    }
    .full-link {
        display: block;
        width: 100%;
        height: 100%;
    }
}