/* ================Screen medium============ */
@media screen and (width >=48rem) {
    .cards .container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "supervisor t-builder "
            "karma calculator";
        gap: 30px;
    }
}

/* ================Screen large============ */
@media screen and (width >=62rem) {
    .cards .container {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "supervisor t-builder calculator"
            "supervisor  karma calculator";
    }
    /*  */
}