.gallery-grid{

    display:grid;

    grid-template-columns:repeat(12,1fr);

    gap:22px;

    margin-top:80px;

}
.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    cursor:pointer;

    background:#111;

    aspect-ratio:4/3;

    grid-column:span 4;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    padding:30px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.78),
        rgba(0,0,0,0)
    );

    opacity:0;

    transition:.45s;

}
.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}

.gallery-btn{

    width:56px;

    height:56px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(12px);

}

.gallery-item.large{

    grid-column:span 8;

}
.gallery-item.tall{

    aspect-ratio:4/5;

}
@media(max-width:992px){

.gallery-item{

grid-column:span 6;

}

.gallery-item.large{

grid-column:span 6;

}

}

@media(max-width:768px){

.gallery-item{

grid-column:span 12;

}

.gallery-item.large{

grid-column:span 12;

}

}
.gallery-overlay span{

    color:var(--gold);

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.gallery-overlay h4{

    margin-top:10px;

    font-size:32px;

    line-height:1;

    color:#fff;

}

.gallery-btn{

    width:58px;

    height:58px;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:24px;

    transition:.4s;

}

.gallery-item:hover .gallery-btn{

    background:var(--red);

    transform:rotate(-45deg);

}