@media only screen and (min-width:580px) {
    .header-h1 {
        font-size: 5rem;
    }
    .header-h2 {
        font-size: 7rem;
    }
    .card__p.hero {
        font-size: 2.1rem;
    }
    .cards {
        max-width: 70rem;
        grid-template-columns: repeat(2,1fr);
    }
}

@media only screen and (min-width: 900px) {
    .cards {
        max-width: 87rem;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .card {
        height: 36.8rem;
    }
}