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

#content{
    display:grid;
    grid-template-columns: repeat(1, 1fr); /*no. of cols, 1fr=equal size*/
    grid-template-areas: 
    "img1"
    "t1"
    "img2"
    "q1"
    "t2"
    "img3"
    "t3"
    "be"
    "conc"
    "q2"
    "log";

    gap:2em;
} 

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

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

#content> :nth-child(2) p{
    margin-top: 0;
}

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


#content> :nth-child(4){
grid-area: q1;
}

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

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

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

#content> :nth-child(8){
    grid-area: be;
    display: grid;
    row-gap: 2em;
    grid-template-columns: repeat(1, 1fr)!important; /*no. of cols, 1fr=equal size*/
    grid-template-areas: 
    "scn"
    "doc"
    "p1"
    "p2";

}

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

#content > :nth-child(8) > :nth-child(2) {
    grid-area: doc;
    display: grid;
    column-gap: 2rem;
    grid-template-columns: repeat(3, 1fr); /* Three equal columns */
    grid-template-rows: repeat(3, auto); /* Three equal rows */
    grid-template-areas: 
        "s1 s1 s2"
        "s1 s1 s3"
        "m1 m1 m2";
    background-color: #634EA7;
    padding: 5rem 10%;
}

#content > :nth-child(8) > :nth-child(2) img {
    width: 100%;
    height: auto;
    display: block;
}

#content > :nth-child(8) > :nth-child(2) > :nth-child(1) {
    grid-area: s1;
}

#content > :nth-child(8) > :nth-child(2) > :nth-child(2) {
    grid-area: s2;
    margin-top:3px;
}

#content > :nth-child(8) > :nth-child(2) > :nth-child(3) {
    grid-area: s3;
}

#content > :nth-child(8) > :nth-child(2) > :nth-child(4) {
    grid-area: m1;
    margin-top:4rem;
}

#content > :nth-child(8) > :nth-child(2) > :nth-child(5) {
    grid-area: m2;
    margin-top:calc(4rem + 3px) ;
}


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

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

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

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


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

@media (min-width:700px){
    #content> :nth-child(8){
        column-gap: 2em;
        grid-template-columns: repeat(2, 1fr)!important;
        grid-template-areas: 
        "scn scn"
        "doc doc"
        "p1 p2"
        ;
    
    }

    #content> :nth-child(8)> :nth-child(3),#content> :nth-child(8)> :nth-child(4) {
        padding:3rem 2rem 1rem 2rem;
    }

}

@media (min-width: 900px) { /* was 767 This is font desktop shift */
    #content> :nth-child(6){
        padding:0 10%;
    }
}

@media (min-width:1000px){
    #content> :nth-child(8)> :nth-child(2){
        grid-template-columns: repeat(8, 1fr)!important;
        row-gap:5rem;
        padding:0;
        grid-template-areas: 
        ". s1 s1 s2 s2 s3 s3 ."
        ". . m1 m1 m2 m2 . ."
        ;
        padding-top:5rem; /*add 5 for bottom rowgap*/
    }

    #content > :nth-child(8) > :nth-child(2) > :nth-child(2),
    #content > :nth-child(8) > :nth-child(2) > :nth-child(4),
    #content > :nth-child(8) > :nth-child(2) > :nth-child(5) {
        margin-top:0;
    }    
}


@media (min-width:1400px){
    #content{
        grid-template-columns: repeat(4, 1fr); 
        grid-template-areas: 
        "img1   img1    img1    ."
        "t1     t1      t1     ."
        "img2   img2    img2    img2"
        "q1     q1      q1      q1"
        "t2     t2      t2      t2"
        ".      img3    img3    ."
        "t3     t3      t3      t3"
        "be     be      be      be"
        
        
        "conc   conc    conc    conc"
        "q2     q2      q2      q2"
        
        ".   log     log    ."
         ;
         row-gap:3em;

         
    }

    #content> :nth-child(8){
        column-gap: 2em;
        grid-template-columns: repeat(4, 1fr)!important;
        grid-template-areas: 
        "scn scn scn scn"
        "doc doc doc doc"
        ". p1 p2 ."
        ;
    
    }
    
    

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

    #content > :nth-child(4),
    #content> :nth-child(9),
    #content> :nth-child(10){
        margin:0 22%;
    }

    #content> :nth-child(8)> :nth-child(2){
        padding-top:8rem; /*add 5 for bottom rowgap*/
        padding-bottom: 3rem;
    }
    
    #content> :nth-child(8)> :nth-child(3),#content> :nth-child(8)> :nth-child(4) {
        padding:initial;
        margin-top:3rem;
    }

    #content> :nth-child(6){
        padding:initial;
    }
 
}

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