.i1 {grid-area: i1;}
.i2 {grid-area: i2;}
.i3 {grid-area: i3;}
.i4 {grid-area: i4;}

.motto {
    grid-area: motto;
    justify-self: center;
    padding-left:0px;
}
.footer {
    grid-area: footer;
    padding-left: 1em;
    color: #ddd;
    justify-self: center;
    font-size: 100%;
}
.logo {
    height: 300px;
    justify-self: end;
    padding-right: 2%;
    grid-area: logo;
}

body {
    background-color: #333;
}

p {
    font-size: 150%;
    font-family: 'sans-serif';
    padding-left: 1em;
    justify-self: start;
}


hr {
    grid-area: hr;
    width: 75%;
    height:2px;
    color: #ddd;
    margin-top: 1.5em;
}

.grid {
    display: grid;
    background-color: #fff;
    margin: 5%;
    padding-top: 1em;
    height: 410px;
    border: 2px solid white;
    border-radius: 10px;
    grid-template-columns: 60% auto;
    grid-template-areas: "logo i1"
                         "logo i2"
                         "logo i3"
                         "logo i4"
                         "hr hr"
                         "motto motto"
                         "footer footer";
}

@media (max-width: 749px) {
    .grid {
        display: grid;
        height: 660px;
        width: 85%;
        margin: 5% auto;
        grid-template-columns: auto;
        grid-template-areas:"logo"
                            "motto"
                            "hr"
                            "i1"
                            "i2"
                            "i3"
                            "i4"
                            "footer";
        grid-row-gap: 1em;
    }
    p {
        justify-self: center;
        padding-left: 0px;
    }
    .logo {
        width: 150px;
        height: 150px;
        justify-self:center;
        padding-right: 0px;
    }
}

@media (min-width: 1200px) {
    .logo {

        justify-self: center;
        padding-right: 0%;
    }
    .footer {
        font-size: 85%;
    }
    p {
        justify-self: center;
        padding-left: 0px;
    }
    hr {
        margin-top: 0%;
    }
    .grid {
        display: grid;
        height: 510px;
        width: 85%;
        margin: 5% auto;
        grid-template-columns: auto;
        grid-template-areas: "logo logo logo logo"
                            "motto motto motto motto"
                            "hr hr hr hr"
                            "i1 i2 i3 i4"
                            "footer footer footer footer";
        grid-row-gap: 1em;
        grid-template-rows: 1fr auto;
    }
}