@media only screen and (min-width: 30em) { 
    .cards {
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (min-width: 50em) {
    .cards {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}