/* --------------- CONTENT AREA ------------- */
#content {
   display: grid;
   grid-template-columns: repeat(1, 1fr); /* Single column layout by default */
   grid-template-areas: 
   "img1"
   "img2"
   "img3"
   "img4"
   "img5";
   row-gap: 2em;
}

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

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

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

/* color be for 4*/

#content > :nth-child(4) {
   grid-area: img4;
   background-color:#030500;
   display:grid;

}

#content > :nth-child(4) > div{
   width:100%;
}

/* End color*/

#content > :nth-child(5) {
   grid-area: img5;
   justify-self: center;
}

@media (min-width: 900px) {
   #content {
       grid-template-columns: repeat(4, 1fr); /* Four column layout for larger screens */
    
       
       grid-template-areas: 
       "img1   img1   img1   img1"
       "img2   img2   img3   img3"
       "img4   img4   img4   img4"
       ".      img5   img5   .";
   }

   #content > :nth-child(2) {
       margin-left: 25%;
       margin-right: 5%;
   }

   #content > :nth-child(3) {
       margin-right: 25%;
       margin-left: 5%;
   }

   #content > :nth-child(4) > div{
      width:60%;
      justify-self: center;
   }
}

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