@media(max-width:900px){

    .about-grid,
    .announcement .container{
        grid-template-columns:1fr;
    }

    .gallery{
        columns:2;
    }

    .about-content{
        padding:50px;
    }

    nav{
        gap:20px;
    }
}

@media(max-width:600px){

    .gallery{
        columns:1;
    }

    header .container{
        flex-direction:column;
        height:auto;
        padding:20px 0;
    }

    nav{
        margin-top:15px;
    }

    .hero h1{
        font-size:2.5rem;
    }

    .portfolio-card{
        padding:40px 25px;
    }

    .about-content h2,
    .portfolio h2{
        font-size:3rem;
    }
}