.custom-grid-gallery {
    position: relative;
    gap: 1em;
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(min(180px,50vw),16.4vw,314px);
    & .gallery-item {
        position: relative;
        min-height: 0;
        overflow: hidden;
        border-radius: .9em;
        background-color: var(--cLDarkBlack);
        &:nth-child(6n + 1) {grid-row: span 1;}
        &:nth-child(6n + 2) {grid-row: span 2;}
        &:nth-child(6n + 3) {grid-column: span 2;grid-row: span 1;}
        &:nth-child(6n + 4) {grid-row: span 1;}
        &:nth-child(6n + 5) {grid-row: span 1;}
        & picture {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }
        & .content {
            position: absolute;
            inset: 0;
            transition: all .3s;
            padding: min(2em,5vw);
            & .text-center {
                gap: .1em;
                opacity: 0;
                height: 100%;
                translate: 0 3em;
                transition: all .3s;
                margin-inline: auto;
                color: var(--cLWhite);
                width: min(300px,100%);
                justify-content: center;
                &:is(.gallery-item:hover &) {
                    opacity: 1;
                    translate: 0% 0%;
                }
                & .search-icon {
                    width: 2em;
                    height: 2em;
                    display: flex;
                    border-radius: 50%;
                    align-items: center;
                    color: var(--cLWhite);
                    justify-content: center;
                    background: hsl(from var(--cLWhite) h s l/.5);
                    & svg {scale: .6;}
                }
            }
            &:is(.gallery-item:hover &) {background-color: hsl(from var(--cLDarkBlack) h s l/.5);}
        }
    }
    @media screen and (width>=800px) {
        & {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }
}