#grid {
  display: grid;
  grid-template-columns: 300px 300px 300px;
  grid-auto-rows: 300px;
  gap: 1em;
  justify-content: center;
}

.item {
  background-color: black;
}

.item img {
  max-width: 100%;
  height: auto;
}

      /* BELOW THIS POINT IS MEDIA QUERY */
    
      /*  by default, the container width is 1520px.
        in order to keep things responsive, take your new height,
        and then subtrack it by 100. use this new number as the 
        "max-width" value below
        */

            @media only screen and (max-width: 1420px) {
                
                #header {
                    height: 290px;  
                }
                 
                #navbar ul {
                    margin: 0px;
                    left: -8px;
                }
                
                #navbar li a img{
                    width: 100%;
                }
              
            }
            
            @media only screen and (max-width: 1270px) {
                
                #header {
                    height: 260px;  
                }

                
            @media only screen and (max-width: 960px) {

                #header {
                    height: 190px;  
                }
                
            }
                
            @media only screen and (max-width: 750px) {
                
                #header {
                    height: 150px;  
                }
                
            @media only screen and (max-width: 610px) {
                
                #header {
                    height: 120px;  
                }
            }