@media (min-width: 600px) {
    main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 3.2rem;
    }
}

@media (min-width: 850px) {
    main {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        row-gap: 3.2rem;
    }

    header h1 {
        font-size: 3.2rem;
        max-width: 250px;
    }
}

@media (min-width: 1100px) {
    main {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        row-gap: 3.2rem;
    }

    header h1 {
        font-size: 4rem;
        max-width: 350px;
    }
}