ul{
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    width: 20%;
}
#help{
    display: none;
}
body{
    background-color: green;
    font-size: large;
    display: grid;
    grid-template-areas: 
    "header header header"
    "logo img1 img2"
    "p1 p2 p3"
    "p4 p4 p4"
    "foot foot foot";
}
img{
    width: 100%;
    height: auto;
}
header{
    grid-area: header;
}
#img1{
    grid-area: img1;
}
#logo{
    grid-area: logo;
}
#img2{
    grid-area: img2;
}
#p1{
    grid-area: p1;
}
#p2{
    grid-area: p2;
}
#p3{
    grid-area: p3;
}
#p4{
    grid-area: p4;
}
footer{
    grid-area: foot;
}
p{
    border: solid black 1px;
}
@media screen and (max-width: 599px) {
    body{
        background-color: green;
        font-size: x-large;
        display: grid;
        grid-template-areas:
            "header"
            "logo"
            "img1"
            "img2"
            "p1"
            "p2"
            "p3"
            "p4"
            "foot";
    }
    ul{
        display: none;
    }
    #help{
        display: block;
    }
    
}
@media screen and (min-width:600px) and (max-width: 1200px) {
    body{
        background-color: green;
        font-size: larger;
        display: grid;
        grid-template-areas: 
        "header header"
        "logo logo"
        "img1 img2"
        "p1 p2"
        "p3 p4"
        "foot foot";
    }
}