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

    grid-template-areas: 
    "img1"
    "img2"
    "img3";

    gap:2rem;
}

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

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

 #content> :nth-child(3){
    grid-area: img3;
 }

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

    #content> :nth-child(3){
        margin:10%;
        margin-bottom:0;
     }

}

@media (min-width:900px){
    #content{
        grid-template-columns: repeat(6, 1fr);

        grid-template-areas: 
        ".      .      . .      img2    img2 "
        "img1   img1   . .      img2    img2 "
        "img1   img1   img3 img3   img3    img3  "
        ".      .      img3 img3  img3    img3   "
         ;


    }

}

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