/* Global Style for mobile */
h1 span{
    display: block;
}
.about_image1 img {
    width: 100%;
}
.about_image2 img{
    width: 100%;
    padding-left: 5px;
}

.main_about{
    display: grid;
    grid-template-rows: repeat(5, auto);
    grid-template-columns: repeat(3, auto);
    grid-template-areas: 
    "title title title"
    ". image1 image1"
    "info1 info1 info1"
    "image2 image2 ."
    "info2 info2 info2";
}
.title_slogan{
    grid-area: title;
    text-align: center;
}
.about_image1{
    grid-area: image1;
}
.about_image2{
    grid-area: image2;
}
.about_info1{
    grid-area: info1;
    padding: 0px 20px;
}
.about_info2{
    grid-area: info2;
    padding: 0px 20px;
}
 

/* Desktop */
@media only screen and (min-width: 1008px){
    .main_about{
        grid-template-rows: auto auto auto;
        grid-template-columns: auto auto;
        grid-template-areas: 
        "title title"
        "info1 image2"
        "image1 info2";
        column-gap: 50px;
    }
   
    .about_image1{
        justify-self: center;
        padding-bottom: 50px;
    }
    .about_image2{
        justify-self: center;
    }
    .about_info1{
        padding: 0px 30px;
    }
    .about_info2{
        padding: 0px 30px;
    }
   
}