body {
    font-family: "Prompt", sans-serif;
    background-color: #E0E6F8;
    margin: 30px;
}

.nav-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
    margin-top: 30px;
    display: grid;
    grid-template-columns: 30% auto;
}

.nav-wrapper li {
    display: inline;
    list-style-type: none;
    border: 2px solid #333;
    padding: 5px;
    border-radius: 3px; 
}

.nav-wrapper li:hover {
    cursor: pointer;
}

.nav-items {
    text-align: right; 
}

.burger-icon {
    display: none; 
}

.nav-wrapper a {
    letter-spacing: 0.1em;
    text-decoration: none;
    font-weight: bold;
    color: #000; 
}

.list-item {
    text-transform: uppercase;
}

.list-item:hover {
    background-color: #eee;
    transition: .2s; 
}

.logo {
    font-size: 24px; 
}

.main-wrapper {
    max-width: 1200px;
    margin: auto; 
}

.wrapper {
    max-width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-template-areas: 
        "featuredMain featuredMain featuredSub"
        "contentMain contentMain contentSub"; 
}

.wrapper > .featured,
.wrapper > .sub-featured > div,
.wrapper > .main-content,
.wrapper > .main-sidebar {
    padding: 20px; 
}

.featured {
    grid-area: featuredMain;
    min-height: 500px;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)) border-box, url(https://source.unsplash.com/1600x900/?surf-views) no-repeat center center;
    background-size: cover;
    display: grid;
    align-content: flex-end;
    color: #fff; 
}

.main-content, .featured, .sub-featured > div, .main-sidebar {
    box-shadow: 0 0 40px black; 
}

.featured h1 {
    font-size: 36px;
    max-width: 650px; 
}

.sub-featured {
    grid-area: featuredSub;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px; 
}

.sub-featured h3 {
    margin-top: 0;
    color: #fff; 
}

.sub1 {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)) border-box, url(https://source.unsplash.com/400x180/?surf) no-repeat center center;
    background-size: cover; 
}

.sub2 {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)) border-box, url(https://source.unsplash.com/400x180/?surfing) no-repeat center center;
    background-size: cover; 
}

.sub3 {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)) border-box, url(https://source.unsplash.com/400x180/?beach-life-surfing) no-repeat center center;
    background-size: cover; 
}

.main-content {
    grid-area: contentMain;
    background-color: rgba(255, 255, 255, 0.35);
    color: #444;
    line-height: 1.5em; 
}

.main-sidebar {
    grid-area: contentSub;
    background-color: rgba(255, 255, 255, 0.35);
    color: #444;
    line-height: 1.5em; 
}

.footer {
    display: grid;
    margin-top: 10px;
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)) border-box, url(https://source.unsplash.com/1600x900/?nature) no-repeat center center;
    background-size: cover;
    grid-template-columns: minmax(20px, 300px) minmax(20px, 300px) minmax(20px, 300px) minmax(20px, 300px);
    justify-content: center;
    /*grid-template-rows: 1fr 1fr;*/
    color: #fff; 
}

.footer > div {
    padding: 20px; 
}

.copyright {
    max-width: 1200px;
    margin: auto;
    grid-column: 1/-1; 
}

/* TABLET MEDIA QUERY */

@media screen and (max-width: 950px) {
    .wrapper {
        grid-template-areas:
        "featuredMain featuredMain featuredMain"
        "featuredSub featuredSub featuredSub"
        "contentMain contentMain contentSub";
    }

    .sub-featured {
        grid-template-columns: repeat(3, 1fr);
    }

    .nav-items {
        grid-column: 1/4;
        text-align: center;
    }

    .logo {
        grid-column: 1/4;
        text-align: center;
    }

    .nav-wrapper {
        margin-top: 0;
    } 
}

/* MOBILE MEDIA QUERY */

@media screen and (max-width: 690px) {
    .logo {
        grid-column: 1/3;
    }

    .nav-items {
        grid-column: 1/5;
        text-align: center;
    }

    .nav-wrapper ul {
        padding: 0;
        margin: 0;
    }

    .nav-wrapper ul li {
        display: block;
        margin: 5px 0;
    }

    .burger-icon {
        display: inline-block;
        justify-self: end;
        grid-column: 4/5;
        border: 2px solid #333;
        color: #333;
        padding: 10px;
        font-weight: bold;
        border-radius: 3px; 
    }

    .burger-icon:hover {
        cursor: pointer;
        background-color: #eee;
        transition: .2s;
    }

    .wrapper {
        grid-template-areas: 
        "featuredMain featuredMain featuredMain" 
        "contentMain contentMain contentMain" 
        "featuredSub featuredSub featuredSub" 
        "contentSub contentSub contentSub";
    }

    .sub-featured {
        grid-template-columns: 1fr; 
    }

    .footer > div{
        grid-column:1/-1;
    }

    .featured h1 {
        font-size: 30px;
    }

    .mobile-show {
        display: block;
    }

    .mobile-hide {
        display: none;
    } 
}