* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container{
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.1fr 0.5fr 0.5fr 0.7fr 0.5fr ;
    grid-template-areas: "logobox navbar navbar navbar"
                        "main main mainimg mainimg"
                        "content1-product content1-product content1-product content1-product"
                        "content2-industry content2-industry content2img content2img"
                        "footer footer footer footer";
    grid-gap: 0.2rem;                    
                        
}
.logobox{
    background-color: rgb(55, 139, 139);
    grid-area: logobox;
    display: flex;
    padding: 5px;
    justify-content: center;
    
}
.navbar{
    background-color: rgb(39, 27, 210);
    grid-area: navbar;
}
.navbar nav ul{
    display: flex;
    list-style: none;
    justify-content: space-around; 
      
}
.navbar nav ul li{
    margin: 3px;
}
.navbar nav ul li a{
    font-size: 1.1rem;
}

main{
    background-color: aquamarine;
    grid-area: main;

}
.mainimg{
    background-color: rgb(218, 60, 60);
    grid-area: mainimg;
}
.content1-product{
    background-color: blue;
    grid-area: content1-product;
}
.content2-industry{
    background-color: gray;
    grid-area: content2-industry;
}
.content2img{
    background-color: greenyellow;
    grid-area: content2img;
}
footer{
    background-color: brown;
    grid-area: footer;
}
@media only screen and (max-width:640px)
{
    .container{
        
        grid-template-columns: 1fr;
        grid-template-rows: 0.1fr 0.2fr 0.4fr 0.4fr 0.4fr 0.4fr 0.4fr 0.4fr;
        grid-template-areas: "logobox"
                            "navbar"
                            "main"
                            "mainimg"
                            "content1-product"
                            "content2-industry"
                            "content2img"
                            "footer";
    }
    
}