@media(max-width:900px){

    nav{

        flex-direction:column;

        height:auto;

        padding:20px 0;

    }

    nav ul{

        flex-wrap:wrap;

        justify-content:center;

        margin-top:20px;

        gap:20px;

    }

    h1{

        font-size:2.8rem;

    }

    .grid-2,
    .grid-3{

        grid-template-columns:1fr;

    }

    .hero-buttons{

        flex-direction:column;

    }

}