main {                                              /*set up the grid*/
    max-width: 1500px;
    width: 95%;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1.5em 1em;
}
main h1 { grid-row: 1/2; grid-column: 1/3;}         /*header takes up entire top row of grid*/
#summary { grid-row: 2/3; grid-column: 1/3;}        /*summary takes up entire second row of grid*/

main h2 {text-align: center; font-size: 170%;}
main p { padding-top: 0; }
.hero { text-align: center; }

main img {
    max-width: 500px;
    width: 100%;
}

@media only screen and (max-width: 966px) {         /*adjust spacing*/
    main {
        width: 100%;
        grid-gap: .75em .75em;
    }
    main h3 {padding: 0 .5em; }
    #summary p { margin: .5em 1em; }
    main img { padding-bottom: 0;}
}

@media only screen and (max-width: 690px) {         /*get rid of grid for smaller screens*/
    main { display: block; }
    div {padding-bottom: 1em;}
}