/*
h1 brown #6c3416 rgba(108,52,22,1)
light background rgba(234, 231,229,1), #eae7e5
#2b221d charcoal black rgba(43,34,29,1)
rgba(82,80,82,1) #525052  cement gray
*/

.container {
    background: rgba(43,34,29,1);
    height: unset;
}

header {
    background: linear-gradient(rgba(234, 231,229,1), rgba(234, 231,229,.85), rgba(234, 231,229,.85), rgba(234, 231,229,.75), rgba(234, 231,229,.05)), url(../img/brown_block_sm.png) repeat;
}

main {
    display: flex;
    flex-flow: column nowrap;
    width: 90%;
    margin: 2rem auto;
}

img {
    max-width: 100%;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,.2), 1px 1px 1px 1px rgba(0,0,0,.1) inset, 1px 0px 1px 0px rgba(0,0,0,.3);
    margin-bottom: 1rem;
    border-radius: 2px;
}

img:hover, img:active {
        /*box-shadow: 2px 2px 0px 1px rgba(234, 231,229,1), 3px 3px 0px 2px rgba(0, 0,0,1), 4px 4px 0px 3px rgba(234, 231,229,1), -2px -2px 0px 1px rgba(234, 231,229,1), -3px -3px 0px 2px rgba(0, 0,0,1), -4px -4px 0px 3px rgba(234, 231,229,1), 
            -2px 2px 0px 1px rgba(234, 231,229,1), -3px 3px 0px 2px rgba(0, 0,0,1), -4px 4px 0px 3px rgba(234, 231,229,1), 2px -2px 0px 1px rgba(234, 231,229,1), 3px -3px 0px 2px rgba(0, 0,0,1), 4px -4px 0px 3px rgba(234, 231,229,1);
        */
        box-shadow: 0 0 3px 4px rgba(0, 0, 0, 0.6);
        opacity: .8;
    }

@media only screen and (min-width: 900px) {

main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem 3rem;
}


}