.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;
}
}