.gallery-masonry{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:20px;
}

.gallery-card{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    transition:.25s;
    position:relative;
    break-inside:avoid;
    margin-bottom:18px;
}

.gallery-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

.gallery-thumb{
     width:100%;
    display:block;
    opacity:1;
    transition:.35s;
}

.gallery-info{
    padding:12px;
}

.gallery-name{
    font-weight:600;
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.gallery-size{
    font-size:12px;
    color:#888;
    margin-top:3px;
}

.gallery-actions{
    display:flex;
    justify-content:space-around;
    margin-top:12px;
}

.gallery-actions i{
    font-size:18px;
    cursor:pointer;
    transition:.25s;
}

.gallery-actions i:hover{
    color:#0d6efd;
    transform:scale(1.2);
}

.gallery-overlay{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:calc(100% - 82px);

    background:rgba(0,0,0,.45);

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    opacity:0;

    transition:.25s;

}

.gallery-card:hover .gallery-overlay{

    opacity:1;

}

.gallery-overlay i{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:20px;

    transition:.25s;

}

.gallery-overlay i:hover{

    background:#0d6efd;

    color:#fff;

}


.gallery-card:hover .gallery-thumb{
    
    transform:scale(1.04);
}

@media(max-width:1400px){

.gallery-masonry{

column-count:4;

}

}

@media(max-width:1100px){

.gallery-masonry{

column-count:3;

}

}

@media(max-width:768px){

.gallery-masonry{

column-count:2;

}

}

@media(max-width:500px){

.gallery-masonry{

column-count:1;

}

}




.gallery-card{
    position:relative;
}

.gallery-checkbox{

    position:absolute;

    top:12px;

    left:12px;

    z-index:5;

    background:#fff;

    padding:4px;

    border-radius:8px;

    box-shadow:0 2px 8px rgba(0,0,0,.15);

}

.gallery-checkbox input{

    width:18px;

    height:18px;

    cursor:pointer;

}


.image-check{

    width:20px;

    height:20px;

    cursor:pointer;

}

.gallery-card.selected{

    border:2px solid #0d6efd;

    transform:translateY(-2px);

}