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

    gap:2em;
    margin-bottom: 0;
    
} 

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

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

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

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

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

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

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

/*---- Showcase ----*/
#content> :nth-child(7)> :nth-child(1){
    padding:12rem 10% ;

}

#content> :nth-child(7)> :nth-child(13){
    padding:12rem 0 ;
}


#content> :nth-child(7)> :nth-child(10){
    margin-top:2rem;
    margin-bottom:5rem;
}

#content> :nth-child(7)> :nth-child(11){
    position: relative;
}

#content> :nth-child(7)>:nth-child(11) .bg {
    width:40%;
    left:73%;
    bottom: -20%;
}

#content> :nth-child(7)> :nth-child(12){
    margin-top:5rem;
    position: relative;
}

#content> :nth-child(7) .bg {
    position: absolute;
    z-index: -1;
}

#content> :nth-child(7)>:nth-child(12) .bg {
    width:100%;
    right:38%;
    top: 10%;
}

/*---- End Showcase ----*/

/*---- element formatting ----*/
#content .quote {
    border-left: 5px solid #55B1EC;
}

#content> :nth-child(7) p{
    text-align: center;
}

/*---- END element formatting ----*/

@media (min-width:768px){   
    

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

    #content> :nth-child(7)> :nth-child(6){
        margin:6rem 0;
    }

    /*-- SHOWCASE --*/

    /*Logos*/ 
    #content> :nth-child(7)> :nth-child(1), #content> :nth-child(7)> :nth-child(13){
        padding:12rem 20% ;
    }

    /*elements indiv */
    #content> :nth-child(7)> :nth-child(10), #content> :nth-child(7)> :nth-child(11){
        padding:0 15%;
    }
    
    #content> :nth-child(7)>:nth-child(11) .bg {
        bottom: -50%;
    }

    #content> :nth-child(7)>:nth-child(12) .bg {
        width:50%;
        right:77%;
        top: 30%;
    }

  
    /*quotes*/
    #content> :nth-child(7)> :nth-child(12){
        padding:0 20%;
    }
    
    /*Text*/
    #content> :nth-child(7)> :nth-child(3),:nth-child(7)>:nth-child(7){
        margin:10rem 0;
    }

    #content> :nth-child(7)>:nth-child(9){
        margin:6rem 0;
    }

    #content> :nth-child(7)> :nth-child(7){
        margin-bottom:3rem;
    }

    #content> :nth-child(7)> :nth-child(9){
        margin-top:3rem;
    }

    #content> :nth-child(7)> :nth-child(9){
        padding-left:0;
    }  
}


@media (min-width:1000px){

    #content> :nth-child(5){
        max-width:75%;
        margin:0 auto;
    }
    
    /*-- SHOWCASE --*/

    /*Logos*/ 
    #content> :nth-child(7)> :nth-child(1){
        padding:15rem 25% ;
    }

    /*elements indiv */
    #content> :nth-child(7)> :nth-child(10){
        padding-right:50%;
        padding-left:0;
    }

    #content> :nth-child(7)> :nth-child(11){
        padding-right:0;
        padding-left:45%;
        bottom:2.5%;
    }
    
    #content> :nth-child(7)>:nth-child(11) .bg {
        top: -60%;
        width:33%;
        left:77%;
    }
    
    
    /*quotes*/
    #content> :nth-child(7)> :nth-child(12){
        padding:0;
    }

    #content> :nth-child(7)>:nth-child(12) .bg {
        top: -200%;
        width:66%;
        right:66%;
    }

    /*Text*/
    #content> :nth-child(7)> :nth-child(3),:nth-child(7)>:nth-child(7),:nth-child(7)>:nth-child(9){
        margin:10rem 0;
    }

    #content> :nth-child(7)> :nth-child(7){
        margin-bottom:3rem;
    }

    #content> :nth-child(7)> :nth-child(9){
        margin-top:3rem;
    }

}

@media (min-width:1200px){

    #content> :nth-child(5){
        max-width:60%;
    }

}

@media (min-width:1400px){
    #content{
        grid-template-columns: repeat(8, 1fr); 
        grid-template-areas: 
        "img1   img1    img1    img1    img1   img1    .        ."
        "t1     t1      t1      t1      t1     t1      .        ."
        ".      img2    img2    img2    img2   img2    img2     ."
        "t2     t2      t2      t2      t2     t2      t2      t2"
        "q1     q1      q1      q1      q1     q1      q1      q1"
        "t3     t3      t3      t3      t3     t3      t3      t3"
        "ben    ben     ben     ben     ben    ben     ben     ben"
         ;
         row-gap:3em;
    }

    #content> :nth-child(5), #content> :nth-child(6){
        max-width:unset;
    }


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

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

     /*-- SHOWCASE --*/
     #content> :nth-child(7)> :nth-child(2), :nth-child(8){
        padding:0 20%;
     }
    
     #content> :nth-child(7)> :nth-child(5){
        padding:0 15%;
    }

    /*Logos*/ 
    #content> :nth-child(7)> :nth-child(1){
        padding:18rem 33% ;
    }

    #content> :nth-child(7)> :nth-child(13){
        padding:18rem 30% ;
    }

    /*elements indiv */
    #content> :nth-child(7)> :nth-child(10){
        padding-right:60%;
        padding-left:0;
    }

    #content> :nth-child(7)> :nth-child(11) .bg{
        top:-93%;
        width:40%;
        left:71%;
    }

    #content> :nth-child(7)> :nth-child(11){
        padding-right:0;
        padding-left:50%;
        bottom:2%;
    }
    
    /*quotes*/
    #content> :nth-child(7)> :nth-child(12){
        padding:0 10%;
    }

    /*Text*/
    #content> :nth-child(7)> :nth-child(3),#content>:nth-child(7)>:nth-child(7){
        margin:10rem 0;
        padding:0 15%;
    }

    #content> :nth-child(7)> :nth-child(9){
        margin-top:3rem;
        padding-right:30%;
    }
}
/* --------------- END CONTENT AREA ------------- */