/* --------------- CONTENT AREA ------------- */
#content{
    display:grid;
    grid-template-columns: repeat(1, 1fr); /*no. of cols, 1fr=equal size*/
    
    grid-template-areas: 
    "img1  "
    "img1  " ;
}

#content> :nth-child(1){
   grid-area: img1;
}

#content> :nth-child(2){
    grid-area: img2;
 }

@media (min-width:500px){
    #content{
        grid-template-columns: repeat(2, 1fr); /* 2 equal cols */
        grid-template-rows: repeat(3,1fr);
        gap:2em;
        
        grid-template-areas: 
        "img1   .     "
        "img1   img2  "
        ".      img2  " ;
    }

}

@media (min-width:900px){
    #content{
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: 
        "img1   .       ."
        "img1   img2    ."
        ".      img2    ." ;
    }

}

/* --------------- END CONTENT AREA ------------- */