/*Global Styles */
* {
    box-sizing: border-box;
}
html {
    font-size: 100%;
}
body {
    max-width: 1280px;
    margin: 0 auto;
}
.item {
    /*center the contents of the grid items. Make each grid item a Flex Container */
    display: flex;
    /*Horizontal and vertical centering*/
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    font-family: sans-serif;
}
.container {
    display: grid;
    grid-template-areas: 1fr;
    grid-template-rows: 7 fr;
    grid-template-areas: 
        "header"
        "nav1"
        "title"
        "narrative"
        "videos"
        "nav2"
        "footer";
    grid-gap: 3rem;
}

.header {
    margin-bottom:  -80px;
    grid-area: header;
}
.nav1 {
    margin-bottom:  -80px;
    grid-area: nav1;
}
.title {
    margin-bottom:  -80px;
    grid-area: title;
}
.narrative {
    grid-area: narrative;
}
.narrative p {
    margin-left: 5%;
    margin-right: 5%;
    font-size: 1rem;
}
.videos {
   background-color: burlywood;
    padding: 3%;
    grid-area: videos;
}
.videos {
     display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
   
}


.nav2 {
    margin-bottom: -80px;
    grid-area: nav2;
}
.footer {
    grid-area: footer;
}

/*media screen size */

@media screen and (max-width:1120px) {
    .videos {
    grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width:780px) {
    .videos {
        grid-template-columns: repeat(1, 1fr);
    }
    .header h1 {
        font-size: 1rem;
    }
    .title h1 {
        font-size: 1.5rem;
    }
    .narrative p {
        font-size: .8rem;
        margin-left: 10%;
        margin-right: 10%;
    }
}

@media screen and (max-width:550px) {
    .header h1 {
        font-size: .7rem;
    }
    .nav1 h3 {
        font-size: .8rem;
    }
    .title h1 {
        font-size: 1rem;
    }
    .nav2 h3 {
        font-size: .8rem;
    }
    footer h6 {
        text-align: center;
        margin-left: 10%;
        margin-right: 10%;
    }
}

@media screen and (max-width:450px) {
    .header h1 {
        font-size: .6rem;
    }
    .nav1 h3 {
        font-size: .8rem;
    }
    .title h1 {
        font-size: 1rem;
    }
    .nav2 h3 {
        font-size: .8rem;
    }
    .footer h6 {
        text-align: center;
        margin-left: 10%;
        margin-right: 10%;
    }
    
}