#wrapper {
    display: grid;
    grid-template-columns: minmax(0px,1fr) repeat(6, minmax(0,175px)) minmax(0px, 1fr);
    grid-auto-rows: minmax(0px, auto);
    background-color: #A0A6AE;
}

#bar {
    background-color: #111113; 
    grid-column: 1 / -1;
    grid-row: 1 / 2;
}

#snowboarder {
    background-image: url(snowboarder.jpg);
    background-size: cover; 
    background-position: center;
    height: 750px;
    grid-column: 1 / -1;
    grid-row: 2 / 5;
}

#park {
    background-image: url(park.jpg);
    background-size: cover;
    background-position: center;
    height: 900px;
    grid-column: 1 / -1;
    grid-row: 3 / 6;
    margin-top: 1in;
    margin-bottom: 1in;
    border: 0.5em solid #111113;
}

#trees {
    background-image: url(trees.jpg);
    background-size: cover;
    background-position: center;
    height: 900px;
    grid-column: 1 / -1;
    grid-row: 3 / 6;
    margin-bottom: 1in;
    border: 0.5em solid #111113;
}

#trick {
    background-image: url(trick.jpg);
    background-size: 100%;
    background-position: center;
    height: 820px;
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    background-repeat: no-repeat;
}

#sitting {
    background-image: url(sitting.jpg);
    background-size: cover; 
    background-position: center;
    height: 750px;
    grid-column: 1 / -1;
    grid-row: 2 / 5;

}

nav {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
}

nav a {
    text-decoration: none;
    display: block;
    padding: 5px 0;
    text-align: center;
    color: white;
}

nav li {
    width: 100%;
}

nav ul {
    list-style: none;
    display: flex;
    margin: 1em;
    padding: 0px;
}

nav a:hover {
    background-color: #383FDA;
}

body {
    margin: 0px;
}

main {
    grid-column: 2 / 8;
}

h2 {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #383FDA;
    font-size:xx-large;
}

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: larger;
    padding-top: 1em;
    padding-bottom: 1.5em;
}

footer {
    text-align: center;
    font-style: italic;
    background-color: #111113;
    padding: 0.5em;
    grid-row: 9 / 10;
    grid-column: 1 / -1
}

@media only screen and (max-width: 992px) {
   #wrapper {
       display: grid;
       grid-template-columns: repeat(4,minmax(0,1fr)) minmax(0px,768px) repeat(4,minmax(0,1fr));
       grid-template-rows: minmax(0px,auto);
   }
   p {
       padding-left: 1em;
       padding-right: 1em;
   }
}

@media only screen and (max-width: 768px) {
    #wrapper {
        display: grid;
        grid-template-columns: repeat(4,minmax(0,1fr)) minmax(0px,100%) repeat(4,minmax(0,1fr));
    }
    p {
        padding-left: 1em;
        padding-right: 1em;
    }

}