@media (min-width: 40rem) {
    .content>p {
        margin: auto;
        max-width: 32rem;
        margin-block-end: 2rem;
    }

    .cards {
        display: grid;
        place-items: center;
        margin: auto;
        max-width: 40rem;
        gap: 1.2rem;
        grid-template: 1fr 1fr / 1fr 1fr;
        grid-template-areas:
            "card1 card3 "
            "card2 card4";
    }

    .cards .card1 {
        grid-area: card1;
    }

    .cards .card2 {
        grid-area: card2;
    }

    .cards .card3 {
        grid-area: card3;
    }

    .cards .card4 {
        grid-area: card4;
    }

    .cards .card {
        min-height: 15rem;
        margin-block-end: 0;
        
    }
}

@media (min-width: 64rem) {
    .content {
        margin-block-start: 2rem;
    }

    .content>p {
        font-size: .900rem;
    }

    .cards {
        max-width: 60rem;
        grid-template: 1fr 1fr / repeat(3, 1fr);
        grid-template-areas:
            "card1 card2 card4"
            "card1 card3 card4";
    }

    .cards .card img {
        margin-block: 1.5rem;
    }

    .cards .card>* {
        margin-block: .3rem;
    }
}

@media (min-width: 90rem) {
    .content {
        margin-block-end: 4rem;
    }

    .content>p {
        margin-block-end: 3rem;
    }
    .cards {
        max-width: 70rem;
        gap: 2rem;
    }
}