
#building-grid-container-columns { 
    display: grid;
    transition: .5s;
}

#building-grid-container-columns img {
    width: 100%;
    display: block;
}

#building-item-1 {
    grid-area: building-item-1;
    text-align: center;
    transition: .5s;
    margin: 0;
    font-size: 1.2em;
    line-height: 1.8em;
}

#building-item-2 {
    grid-area: building-item-2;
    text-align: center;
    transition: .5s;
    margin: 0;
    font-size: 1.2em;
    line-height: 1.8em;
}

.building-item-text {
    text-align: left;
    transition: .5s;
    line-height: 1.8em;
    padding: 4%;
}

.building-hero{margin-top:0 !important;}



@media only screen and (max-width: 360px) {


    #building-grid-container-columns {
        grid-template-areas: "building-item-1"
                             "building-item-2"; 
    }

    .building-item-text {
        padding: 0 5%;
    }

    #building-grid-container-columns img {
        height: 30vh;
        object-fit: cover;
    }

}

@media only screen and (min-width: 360px) and (max-width: 760px) { 
    
    #dev-fecr-logo {
        padding: 0 16%; 
    }
    
    #dev-founded-by-text {
        padding: 0 10%;   
    }

    #building-grid-container-columns {
        grid-template-areas: "building-item-1"
                             "building-item-2"; 
        transition: .5s;
    }

    .building-item-text {
        padding: 0 10%;
    }

    #building-grid-container-columns img {
        height: 50vh;
        object-fit: cover;
    }
}

@media only screen and (min-width: 760px) and (max-width: 1280px) { 
    
    #dev-fecr-logo {
        width: 500px; 
    }
    
    #dev-founded-by-text {
        padding: 0 7%;   
    }

    #building-grid-container-columns {
        grid-template-areas: "building-item-1 building-item-2"; 
        transition: .5s;
        padding: 0 5%;
    }
   
    #building-item-1 {
        margin-right: 50px;
    }

    #building-item-2 {
        margin-left: 50px;
    }

    .building-item-text {
        padding: 0 5%;
    }

}

@media only screen and (min-width: 1280px) and (max-width: 1460px) { 
    
    #building-grid-container-columns {
        grid-template-areas: "building-item-1 building-item-2"; 
        transition: .5s;
        padding: 0 10%;
    }
   
    #building-item-1 {
        margin-right: 50px;
    }

    #building-item-2 {
        margin-left: 50px;
    }

    .building-item-text {
        padding: 0 5%;
    }
}

@media only screen and (min-width: 1460px) and (max-width: 1760px) { 

    #building-grid-container-columns {
        grid-template-areas: "building-item-1 building-item-2"; 
        margin: 100px auto; 
        transition: .5s;
        padding: 0 15%;
    }
   
    #building-item-1 {
        margin-right: 50px;
    }

    #building-item-2 {
        margin-left: 50px;
    }

    .building-item-text {
        padding: 0 5%;
    }
}

@media only screen and (min-width: 1760px) and (max-width: 2020px) { 

    #building-grid-container-columns {
        grid-template-areas: "building-item-1 building-item-2"; 
        margin: 100px auto; 
        transition: .5s;
        padding: 0 20%;
    }
   
    #building-item-1 {
        margin-right: 50px;
    }

    #building-item-2 {
        margin-left: 50px;
    }
}

@media only screen and (min-width: 2020px) and (max-width:2400px ) { 

    #building-grid-container-columns {
        grid-template-areas: "building-item-1 building-item-2"; 
        margin: 100px auto; 
        transition: .5s;
        padding: 0 15%;
    }
   
    #building-item-1 {
        margin-right: 50px;
    }

    #building-item-2 {
        margin-left: 50px;
    }

}

@media only screen and (min-width: 2400px) {

    #building-grid-container-columns {
        grid-template-areas: "building-item-1 building-item-2"; 
        margin: 100px auto; 
        transition: .5s;
        padding: 0 25%;
    }
   
    #building-item-1 {
        margin-right: 50px;
    }

    #building-item-2 {
        margin-left: 50px;
    }
} 



.building-hero{margin-top:0 !important;}