@media only screen and (min-width: 0px) and (max-width: 1024px) {
    html {
        height: 100%;
        background-color: rgb(177, 177, 177);
    }
    
    body {
        display: grid;
        grid-template-rows: auto 280px auto;
        grid-template-areas: 
                "a"
                "b"
                "c"
                "d"
                "e"
                "f"
                "g"
                "h"
                "i"
                "j"
                "k";
    }

    p {
        text-align: center;
    }

    .rightImages {
        visibility: hidden;
        position: fixed;
    }

    .description {
        font-size: medium;
    }

    .contactInfo {
        grid-area: k;
        text-align: center;
    }

    img {
        justify-self: center;
    }
    
    .logoContainer {
        max-width: 100%;
        grid-area: b;
    }

    #title {
        grid-area: a;
        text-align: center;
    }

    #logo {
        width: 100%;
        max-height: 75%;
    }

    #p1 {
        grid-area: c;
    }

    #p2 {
        grid-area: e;
    }

    #p3 {
        grid-area: g;
    }

    #p4 {
        grid-area: i;
    }

    #firstLeft {
        grid-area: d;
    }

    #secondLeft {
        grid-area: f;
    }

    #thirdLeft {
        grid-area: h;
    }

    #centerImage {
        grid-area: j;
    }
}
@media only screen and (min-width: 1025px) {

    html {
        height: 100%;
        background-color: rgb(177, 177, 177);
    }

    body {
        display: grid;
        grid-template-columns: 25% 50% 25%;
        grid-template-rows: auto minmax(230px, 290px) 295px min-content auto auto 0px;
        grid-template-areas: 
                    "a a a"
                    "b j ."
                    "c e f"
                    "d l k"
                    "d n g"
                    "m m m";
    }

    #title {
        grid-area: a;
        width: 100%;
        text-align: center;
        padding-left: 0%;
    }

    #logo {
        grid-area: j;
        width: 100%;
        height: 80%;
        align-self: center;
    }

    #centerImage {
        grid-area: f;
        width: 80%;
        height: 80%;
        padding-left: 12px;
        justify-self: center;
    }

    #firstLeft {
        grid-area: b;
    }

    #secondLeft {
        grid-area: c;
    }

    #thirdLeft {
        grid-area: d;
    }

    #p1 {
        grid-area: e;
    }

    #p2 {
        grid-area: l;
    }

    #p3 {
        grid-area: n;
    }

    #p4 {
        grid-area: g;
    }

    .leftImages {
        width: 50%;
        padding-top: 5%;
    }

    .logoContainer {
        height: min-content;
        grid-area: j;
        width: 100%;
        height: 75%;
    }

    .footer {
        grid-area: m;
        font-size: smaller;
        text-align: center;
    }

    .rightImages {
        height: 75%;
        justify-self: center;
        visibility: hidden;
        position: fixed;
    }

    #symbol3 {
        height: 85%;
        align-self: center;
        margin: 0% 25%;
    }

    .description {
        padding-top: 10px;
        text-align: center;
        font-size: x-large;
        grid-area: e;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .contactInfo {
        text-align: center;
        grid-area: k;
    }

    .contactInfo p {
        text-align: center;
    } 
}