@media only screen and (min-width: 38rem) {
    header,
    nav,
    main,
    footer {
        margin: 0 auto;
        max-width: 900px;
    }

    header {
        grid-template-columns: 24px auto;
    }

    .hamburger {
        display: none;
    }

    .navigation {
        display: block;
        border-bottom: 1px solid #eee;
    }

    .navigation ul {
        display: flex;
    }

    .navigation a {
        border: none;
    }

    main {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
    }

    h1, .courses-section {
        grid-column: 1 / -1;
    }

    .about {
        grid-column: 1 / 3;
    }

    #courses {
        grid-template-columns: 1fr 1fr 1fr;
    }
}