.cards-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    width:100%;
}

.card-hover{
    position:relative;
    overflow:hidden;

    height:380px;

    border-radius:22px;

    cursor:pointer;

    background:#000;

    transition:.5s;

    box-shadow:
    0 18px 45px rgba(0,0,0,.15);
}

.card-hover img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
    transform .8s ease,
    filter .5s ease;
}

.card-overlay{
    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:30px;

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

    transition:.5s;
}

.card-overlay h3{

    color:white;

    font-size:28px;

    font-weight:700;

    margin:0;

    transform:translateY(20px);

    transition:.5s;
}

.card-btn{

    margin-top:22px;

    padding:14px 32px;

    background:#fff;

    color:#111;

    text-decoration:none;

    border-radius:999px;

    font-weight:700;

    opacity:0;

    transform:
    translateY(25px)
    scale(.9);

    transition:.45s;
}

.card-hover:hover img{

    transform:scale(1.08);

    filter:
    brightness(.55);
}

.card-hover:hover .card-btn{

    opacity:1;

    transform:
    translateY(0)
    scale(1);
}

.card-hover:hover .card-overlay h3{

    transform:translateY(-12px);
}

.card-btn:hover{

    transform:
    scale(1.05);

    background:#f5f5f5;
}

/* Tablet */

@media(max-width:1100px){

.cards-grid{

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

}

}

/* Celular */

@media(max-width:768px){

.cards-grid{

grid-template-columns:1fr;

}

.card-hover{

height:300px;

}

}