@media (max-width: 768px) {
    nav ul {
        width:65%;
    }

    .nav ul li a {
        font-size: 10px;
    }
    .nav h1{
        font-size: 20px;
    }

    .hero .intro h1{
        font-size: 17px;
    }

    .grid {
        padding: 0 20px;
        display: grid;
        grid-template-columns: 200px 200px 200px;
        grid-template-rows: 200px 200px 200px;
        gap: 30px;
    }

    .nav #navbar {
        display: none;
    }

    .burger {
        display: block;
    }
}

@media (max-width: 360px) {
    .hero .intro h1{
        font-size: 16px;
    }

    .hero .intro h3 {
        font-size: 13px;
    }

    #footer, #footer a {
        font-size: 13px;
    }
}