#container {
    display: grid;
    grid-template-areas: 
        "header"
        "p1"
        "p2"
        "p3"
        "p4"
        "img";
    grid-template-rows: 100px fit-content fit-content fit-content fit-content;
    grid-template-columns: 100%;
    gap: auto;
    text-align: center;
}
.nav {
    grid-area: header;
    min-height: fit-content;
    background-color: #baf9ff;
}

.para1 {
    grid-area: p1;
    background-color: rgb(255, 174, 239);
    min-height: fit-content;
}

.para2 {
    grid-area: p2;
    background-color: rgb(165, 255, 149);
    min-height: fit-content;
}

.para3 {
    grid-area: p3;
    background-color: rgb(158, 168, 255);
    min-height: fit-content;
}

.para4 {
    grid-area: p4;
    background-color: rgb(255, 212, 142);
    min-height: fit-content;
}
.logo {
    display: none;
    grid-area: logo;
    min-height: fit-content;
}
.img {
    grid-area: img;
    display: flex;
    max-width: 100%;
    height: auto;
    margin: auto;
}

@media screen and (min-width: 600px) and (max-width: 1199px) {
    #container {
        display: grid;
        grid-template-areas: 
            "header header"
            "p1 p1"
            "p2 logo"
            "p3 logo"
            "p4 img";
        grid-template-rows: 10px fit-content fit-content fit-content fit-content;
        grid-template-columns: 50% 50%;
        gap: auto;
        text-align: center;
    }
    .logo {
        display: flex;
        max-width: 100%;
        height: auto;
        margin: auto;
    }
}
@media screen and (min-width: 1200px) {
    #container {
        display: grid;
        grid-template-areas: 
            "header header header"
            "p1 p1 p1"
            "p2 p2 logo"
            "p3 p3 img"
            "p4 p4 p4";
        grid-template-rows: 100px fit-content fit-content fit-content fit-content;
        grid-template-columns: 33% 33% 33%;
        gap: auto;
        text-align: center;
    }
    .logo {
        display: flex;
        max-width: 100%;
        height: auto;
        margin: auto;
    }
}