html,
body {
    margin: 0;
    background-color: #ddd;
}

.wrapper {
    width: 604px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    vertical-align: middle;
    min-height: 500px;
    height: 500px;
    position: block;
}

.grid-container {
    height: 100%;
    margin: 0;
}

.grid-container * {
    position: relative;
    text-align: center;
}

.grid-container *:after {
    position: absolute;
    top: 0;
    left: 0;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "banner banner banner""left middle right""mission-statement mission-statement mission-statement""footer footer footer";
}

.banner {
    grid-area: banner;
}

.left {
    grid-area: left;
    text-align: left;
}

.middle {
    grid-area: middle;
}

.right {
    grid-area: right;
    text-align: right;
}

.mission-statement {
    grid-area: mission-statement;
    text-align: center;
    font-family: Arial;
    font-size: 14pt;
    color: #358aeb;
}

.footer {
    grid-area: footer;
    font-family: Arial;
    font-size: 8pt;
    margin-top: 3em;
}