@media screen and (min-width: 750px) and (max-width: 999px){
    nav li{
        display: inline-flex;
        flex-direction: row;
    }
    .menu{
        display: none;
    }
    .grid img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .grid{
        grid-template-columns: 1fr 1fr;
    }
    
    .cities{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .forecast{
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    #townEvents{
        grid-column: 1 / 3;
        grid-row: 2;
    } 
    .firstarticle img{
        width: 100%;
    }
}