/*Global Styles*/
* {
    box-sizing: border-box;
}
html {
    font-size: 100%;
}
body {
    /* max-width: 1080px;
    margin: 0 auto; */
    
}
.item {
    /*Center the contents of the grid items. Make each grid item a FlexContainer */
    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: auto;
    grid-template-areas: 
        "header"
        "nav1"
        "title"
        "narrative"
        "photos"
        "nav2"
        "footer";
    grid-gap: 3rem;
}

.header {
    background-color: aqua;
    max-width: 95%;
    margin: 0 auto;
    border: 1px solid black;
    box-shadow: 10px 10px 5px #888888;
    grid-area: header;
}
.nav1 {
    grid-area: nav1;
}
.nav1 ul {
    margin-top: 30px
}
.nav1 li {
    margin-bottom: 10px;
}
.title {
    max-width: 80%;
    margin: 0 auto;
    grid-area: title;
}
.title h1 {
    font-size: 1.5rem
}

.narrative {
    max-width: 85%;
    margin: 0 auto;
    grid-area: narrative;
}
.photos {
    display: block;
    justify-content: flex-start;
    margin: 0 auto;
    grid-area: photos;
}
.photos h2 {
    text-align: center;
    font-size: 1.3rem;
}
.photos img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
}
.photos p {
    text-align: center;
}
.nav2 {
    grid-area: nav2;
}
.nav2 ul {
    margin-top: 30px
}
.nav2 li {
    margin-bottom: 10px;
}

.videos {
    /* margin: 0 auto; */
    background: #ccc;
}
.videos video {
    margin-top: 20px;
}
.footer {
    grid-area: footer;
}

/*Styles for small screen */