.postercol1 {
    grid-area: postercol1;
    background: url("../images/localbusiness/bodyshop/4.jpg");
    background-size: cover;
    /*background-attachment: fixed;*/ /*Take out*/
    background-position: center;
    min-height: 250px;
    min-width: 200px; /*3 col auto at 600 so postercol2 cannot be greater then 200 if defined in 3 cols*/
    /*max-height:250px;*/
}

.postercol2 {
    grid-area: postercol2;
    background: url("../images/localbusiness/bodyshop/1.jpg");
    background-size: cover;
    /*background-attachment: fixed;*/ /*Take out*/
    background-position: center;
    min-height: 250px;
    min-width: 200px; /*3 col auto at 600 so postercol2 cannot be greater then 200 if defined in 3 cols*/
    /*max-height:250px;*/
}

.postercol3 {
    grid-area: postercol3;
    background: url("../images/localbusiness/bodyshop/2.jpg");
    background-size: cover;
    /*background-attachment: fixed;*/ /*Take out*/
    background-position: center;
    min-height: 250px;
    min-width: 200px; /*3 col auto at 600 so postercol2 cannot be greater then 200 if defined in 3 cols*/
    /*max-height:250px;*/
}

.postercol4 {
    grid-area: postercol4;
    background: url("../images/localbusiness/bodyshop/3.jpg");
    background-size: cover;
    /*background-attachment: fixed;*/ /*Take out*/
    background-position: center;
    min-height: 250px;
    min-width: 200px; /*3 col auto at 600 so postercol2 cannot be greater then 200 if defined in 3 cols*/
    /*max-height:250px;*/
}

.postercol4a {
    grid-area: postercol4a;
    background: url("../images/localbusiness/bodyshop/4.jpg");
    background-size: cover;
    /*background-attachment: fixed;*/ /*Take out*/
    background-position: center;
    min-height: 250px;
    min-width: 200px; /*3 col auto at 600 so postercol2 cannot be greater then 200 if defined in 3 cols*/
    /*max-height:250px;*/
}

.postercol5 {
    grid-area: postercol5;
    background: url("../images/localbusiness/bodyshop/5.jpg");
    background-size: cover;
    /*background-attachment: fixed;*/ /*Take out*/
    background-position: center;
    min-height: 250px;
    min-width: 200px; /*3 col auto at 600 so postercol2 cannot be greater then 200 if defined in 3 cols*/
    /*max-height:250px;*/
}

.postercol6 {
    grid-area: postercol6;
    background: url("../images/localbusiness/bodyshop/6.jpg");
    background-size: cover;
    /*background-attachment: fixed;*/ /*Take out*/
    background-position: center;
    min-height: 250px;
    min-width: 200px; /*3 col auto at 600 so postercol2 cannot be greater then 200 if defined in 3 cols*/
    /*max-height:250px;*/
}

.postercol6a {
    grid-area: postercol6a;
    background: url("../images/localbusiness/bodyshop/7.jpg");
    background-size: cover;
    /*background-attachment: fixed;*/ /*Take out*/
    background-position: center;
    min-height: 250px;
    min-width: 200px; /*3 col auto at 600 so postercol2 cannot be greater then 200 if defined in 3 cols*/
    /*max-height:250px;*/
}

.postercontent {
    grid-area: postercontent;
    background-color: #444;
    color: #fff;
    font-size: 20px;
}

.postercontent1 {
    grid-area: postercontent1;
    background-color: #444;
    color: #fff;
    font-size: 20px;
}

.postercontent2 {
    grid-area: postercontent2;
    background-color: #444;
    color: #fff;
    font-size: 20px;
}



.posterheader {
    grid-area: posterheader;
    background-color: #8ebf42;
    color: #fff;
}

.posterfooter {
    grid-area: posterfooter;
    background-color: #8ebf42;
    color: #fff;
}

.posterwrapper {
    background-color: #c7c3c3;
    color: #444;
    display: grid;
    grid-gap: 1em;
    grid-template-areas: "posterheader" "postercol1" "postercol2" "postercontent" "postercol3" "postercol4a" "postercol4" "postercontent1" "postercol5" "postercol6" "postercol6a" "postercontent2" "posterfooter";
    font-size: 16px;
    margin-left: 2%;
    margin-right: 2%;
}
/*Note Margins and max width when setting media size*/
@media only screen and (min-width: 700px) {
    .posterwrapper {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "posterheader posterheader" "postercol1 postercol2" "postercontent postercontent" "postercol3 postercol4a" "postercol4 postercol4" "postercontent1 postercontent1" "postercol5 postercol6" "postercol6a postercol6a" "postercontent2 postercontent2" "posterfooter posterfooter";
        max-width: 80%;
        margin: 0 auto;
    }
}

/*Was originally 600px*/
@media only screen and (min-width: 1000px) {
    .posterwrapper {
        grid-gap: 20px;
        /*First number is height*/
        /*grid-template-columns: 220px auto 220px;*/
        grid-template-columns: ifr 1fr ifr;
        grid-template-areas: "posterheader posterheader posterheader" "postercol1 postercol2 postercol2" "postercontent postercontent postercontent" "postercol4 postercol4a postercol3" "postercontent1 postercontent1 postercontent1" "postercol5 postercol6 postercol6a" "postercontent2 postercontent2 postercontent2" "posterfooter posterfooter posterfooter";
        max-width: 80%;
        /*margin: 20% auto;*/
        margin: 0 auto;
    }
}

.posterbox {
    /*background-color: #444;*/
    /*color: #ffffff;*/
    border-radius: 15px;
    padding: 10px;
    /*font-size: 150%;*/
    /*font-size: 20px;*/
}

.posterheader,
.posterfooter {
    background-color: #8ebf42;
    font-size: 30px;
    border-radius: unset;
}

.postercol2 {
    background-color: #ccc;
    color: #444;
}