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

#content{
    display:grid;
    grid-template-columns: repeat(1, 1fr); /*no. of cols, 1fr=equal size*/
    grid-template-areas: 
    "img1"
    "t1"
    "img2"
    "img3"
    "img4"
    "img5"
    "img6"
    "img7"
    "img8"
    "img9"
    "blk";

    gap:2em;
}

#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;
}

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

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

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

#content> :nth-child(8){
    grid-area: img8;
}

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

/*----- black section grid---------*/
#content> :nth-child(10){
    grid-area: blk;
    display:grid;
    grid-template-columns: repeat(1, 1fr); /*no. of cols, 1fr=equal size*/
    grid-template-areas: 
    "img10"
    "t4"
    "img11"
    ;

    gap:2em;
    background-color: black;
}

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

#content> :nth-child(10)> :nth-child(2){
    grid-area: t4;
    text-align: center;
    color:white;
    padding:0 10%;
    
}

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

/*----- END black section grid---------*/

#content> :nth-child(11){
    grid-area: t1;
    }



@media (min-width:900px){
    #content{
        grid-template-columns: repeat(4, 1fr);
  
        row-gap: 2em;
        column-gap: 0;

        grid-template-areas: 
        "img1   img1    img1    img1"
        "t1     t1      t1      t1"
        "img2   img2    img3    img3"
        "img4     img4    img4    ."
        "img5   img5    img6    img6"
        "img7     img7    img7   ."
        "img8   img8    img8    img8"
        "img9   img9    img9    ."
        "blk    blk     blk     blk"
        ". . . ."
        ;
    }


    #content> :nth-child(10){
        grid-template-columns: repeat(4, 1fr); /*no. of cols, 1fr=equal size*/
        grid-template-areas: 
        "img10  img10   img10   img10"
        "t4     t4      t4      t4"
        ".      img11   img11   ."
        ;

        padding-bottom:10rem;
    }

    #content> :nth-child(11){
        padding:0 10%;
    }
    
    #content> :nth-child(10)> :nth-child(2){
        padding:0 15%;
        }
}

@media (min-width:1400px){
    #content{

        grid-template-areas: 
        "img1   img1    img1    img1"
        "t1     t1      t1      t1"
        "t2     t2      t2      t2"
        "img2   img2    img3    img3"
        
        ".      img4    img4    ."
        
        "img5   img5    img6    img6"
        
        ".      img7    img7    ."
        "img8   img8    img8    img8"
        "img9   img9    img9    ."
        "blk    blk     blk     blk"
        ;
    }

    #content> :nth-child(10){
        grid-template-areas: 
        "img10  img10   img10   img10"
        "t4     t4      t4      t4"
        ".      img11   img11   ."
        ;
    }

    #content> :nth-child(11){
        padding:0 22%;
    }

    #content> :nth-child(10)> :nth-child(2){
    padding:0 25%;
    }
}
/*
@media (min-width:1400px){
    #content{
        grid-template-columns: repeat(5, 1fr);
    }

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