main {
    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;}
main h2 {text-align: center; font-size: 170%;}
#summary { grid-row: 2/3; grid-column: 1/3;}

.hero {
    text-align: center;
}

@media only screen and (max-width: 966px) {
    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) {
    main { display: block; }
    div {padding-bottom: 1em;}
}

/*image rollover code*/
/*#bravelion {
    background-image: url("../images/logo-bl.jpg");
    background-position: center;
    background-repeat: no-repeat;
    width: 30em;
    height: 30em;
    margin: 0 5em;
}
#bravelion:hover, #bravelion:focus {
    background-image: url("../images/sketch-bl.jpg");
}

#karatepeng {
    background-image: url("../images/logo-kp.jpg");
    background-position: center;
    background-repeat: no-repeat;
    width: 30em;
    height: 30em;
    margin: 0 5em;
}
#karatepeng:hover, #karatepeng:focus {
    background-image: url("../images/sketch-kp.jpg");
}

#safedog {
    background-image: url("../images/logo-sd.jpg");
    background-position: center;
    background-repeat: no-repeat;
    width: 30em;
    height: 30em;
    margin: 0 5em;
}
#safedog:hover, #safedog:focus {
    background-image: url("../images/sketch-sd.jpg");
}

#mightyted {
    background-image: url("../images/logo-mt.jpg");
    background-position: center;
    background-repeat: no-repeat;
    width: 30em;
    height: 30em;
    margin: 0 5em;
}
#mightyted:hover, #mightyted:focus {
    background-image: url("../images/sketch-mt.jpg");
}
*/