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

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

    gap:2em;
} 

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

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

#content> :nth-child(3){
grid-area: img2;
background-color: #EAEBEF;

display: flex;
flex-direction: column;
gap: 3rem;
padding:10%;
}

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

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

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

#content> :nth-child(7){
    grid-area: ben;
    height: auto;
    width:100%;
    display: flex;
    justify-self: center;
}



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

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

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

@media (min-width:750px){
    #content> :nth-child(3){ 
        flex-direction: row;
        flex-wrap: wrap;
        padding:5%;
        justify-content: center;
        }
    
    #content> :nth-child(3)> div{ 
        flex:0 0 calc(50% - 5%);
    }
    
    #content> :nth-child(7){
        width:70%;
    }
}

@media (min-width:1000px){
    #content> :nth-child(7){
        width:50%;
    }
    #content> :nth-child(5), #content> :nth-child(6){
        max-width:75%;
        margin:0 auto;
    }
}

@media (min-width:1200px){
    #content> :nth-child(7){
        width:40%;
    }
    #content> :nth-child(5), #content> :nth-child(6){
        max-width:60%;
    }

}

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

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


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

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

    #content > :nth-child(5){
        padding-left:15%;
    }
    #content > :nth-child(6) {
        padding-right:15%;
      }      
    
    #content> :nth-child(3){ 
        flex-wrap:nowrap;
        padding:5%;
        gap: 5rem;
    }

    #content> :nth-child(3)> div{ 
        flex:initial;
    }

    #content> :nth-child(7){
        width:33%;
    }

}



.gif-brdr img{
    border:1px solid #001440;
    overflow:hidden;
    border-radius: 6px;
}

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