.cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:24px;
    margin-top:24px;
}

.card{
    background:#171B26;
    border:1px solid var(--border);
    border-radius:18px;
    overflow:hidden;
    transition:.3s ease;
    height:100%;
}

.card:hover{
    transform:translateY(-5px);
    border-color:#7C5CFF;
}

.card a{
    display:block;
    text-decoration:none;
    color:#fff;
    height:100%;
}

.card img{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
}

.card-image{
    width:100%;
    aspect-ratio:2/3;
    background:linear-gradient(
        135deg,
        #7C5CFF,
        #1A1F2D
    );
}

.card-body{
    padding:18px;
}

.card-title{
    padding:15px;
    margin:0;
    font-size:18px;
    font-weight:700;
    line-height:1.4;
    color:#fff;
}

.card-meta{
    color:var(--muted);
    font-size:14px;
    padding:0 15px 15px;
}

@media(max-width:768px){

    .cards-grid{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }

    .card img{
        height:260px;
    }

    .card-title{
        font-size:16px;
    }

}

@media(max-width:480px){

    .cards-grid{
        grid-template-columns:1fr;
    }

}