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

    grid-template-areas: 
    "img1   img1  img1  img1"
    "img2   img2  .     c1"
    "c2     img3  img3  img3"
    "img4   img4  img4  ."
    "c3     .     img5  img5"
    "img6   img6  img6    ."
    "img7   img7  img7  img7";

    gap:2em;
}

#content img{
   display: block;
   width: 100%;
   height: fit-content;
}

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

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

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

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

 #content> :nth-child(5){
    grid-area: img5;
    display: flex;
    justify-content: right;
    
 }
 #content> :nth-child(5)>img, #content> :nth-child(2)>img{
   max-width: 250px;
   transform: rotate(-50deg);
   object-fit:contain;
}

 #content> :nth-child(6){
   grid-area: img6;
}

#content> :nth-child(7){
   grid-area: img7;
   padding-top:5rem;
}

#content> :nth-child(8){
   grid-area: c1;
   transform: rotate(20deg);
   display: flex;
   align-items: center;
}

#content> :nth-child(9){
   grid-area: c2;
}

#content> :nth-child(10){
   grid-area: c3;
   display: flex;
   align-items: last baseline;
   transform: rotate(-15deg);
}

#content> :nth-child(11){
   grid-area: dp1;
   display: none;
}

#content> :nth-child(12){
   grid-area: dp2;
   display: none;
}

#content> :nth-child(13){
   grid-area: dp3;
   display: none;
}


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

        grid-template-areas: 
        "img1   img1  img1  img1 img1  img1  img1  img1"
        "img2   img2  .     c1   img4  img4  .     ."
        ".      img3  img3  img3 img4  img4  dp2   dp2"
        ".      img3  img3  img3 .     .     dp2   dp2"
        ".      img3  img3  img3 .     c2    .     ."
        ".      c3    .     img5 img5  dp1  dp1  dp1"
        ".      c3      .    .     .    dp1  dp1  dp1"
        "img6  img6  img6   .     .    dp1  dp1  dp1"
        "img6  img6  img6   dp3  dp3  dp3  .  ."
        ".      .    .      dp3  dp3  dp3  .  ."
        ".      .    img7   img7 img7  img7  .  .";

        gap:0;
        column-gap: 2em;
    }

    #content> :nth-child(1){
      margin-bottom: 2em;
   }

    #content> :nth-child(11){
      grid-area: dp1;
      display: block;
      z-index: 20;
   }
   
   #content> :nth-child(12){
      grid-area: dp2;
      display: block;
      transform: rotate(-5deg);
   }
   
   #content> :nth-child(13){
      grid-area: dp3;
      display: block;
      transform: rotate(-5deg);
   }

   #content> :nth-child(10){
      transform: rotate(110deg);
      display: flex;
      align-items: center;

   }
}

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