* {
    margin: 0;
    padding: 0;
    vertical-align: middle;
    font-family: 'Roboto', sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}

.logo {
    text-align: center;
}

.hero {
    grid-area: hero;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 1.0em;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 100px;
}

.hero2 {
    grid-area: hero2;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 1.0em;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 100px;
}

.portraits {
    grid-area: portraits;
    font-family: 'Roboto', sans-serif;
    font-size: 1.0em;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
}

.landscape {
    grid-area: landscape;
    font-family: 'Roboto', sans-serif;
    font-size: 1.0em;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
}

.about {
    grid-area: about;
    font-family: 'Roboto', sans-serif;
    font-size: 1.0em;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 250px;
    text-align: center;
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
        "logo logo"
        "hero hero"
        "portraits portraits"
        "landscape landscape"
        "hero2 hero2"
        "about about"
        "footer footer"
}

@media only screen and (min-width: 760px) {
    .wrapper {
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
            "logo logo logo logo logo logo"
            "hero hero hero hero hero hero"
            "portraits portraits portraits portraits portraits portraits"
            "landscape landscape landscape landscape landscape landscape"
            "hero2 hero2 hero2 hero2 hero2 hero2"
            "about about about about about about"
            "footer footer footer footer footer footer"
    }
}

.footer {
    grid-area: footer;
    text-align: center;
    background-color: #000000;
    color: #9F9F9F;
    font-size: 0.8em;
    padding-top: 40px;
    line-height: 1.6;
    bottom: 0;
    width: 100%;
    height: 200px;
}

.footer-logos {
    letter-spacing: 30px;
}

a.footer:link {
    color: #a0a0a0;
    font-size: 0.8em;
}

a.footer:visited {
    color: #8b8b8b;
    font-size: 0.8em;
}

a.footer:hover {
    color: #ffcc00;
    font-size: 0.8em;
}