.gamecontainer {
	display: grid;
	padding: 0 0 7.5em 0;
	background: #FFFFB3;
    grid-template-columns: repeat(8, 1fr);
   	/*grid-auto-rows: 250px;*/
   	grid-template-rows: auto;
   	grid-column-gap: 4px;
    grid-row-gap: 1px;
    justify-content: center;
    justify-items: center;
    box-sizing: border-box;
    grid-template-areas:
    	". a a b b c c ."
    	". d d e e f f ."
    	". g g h h i i ."
    	". j j k k l l .";
}

.a { grid-area: a;
	height: calc(100% - 3px);}
.b { grid-area: b;
	height: calc(100% - 3px);}
.c { grid-area: c;
	height: calc(100% - 3px);}
.d { grid-area: d;
	height: calc(100% - 3px);}
.e { grid-area: e;
	height: calc(100% - 3px);}
.f { grid-area: f;
	height: calc(100% - 3px);}
.g { grid-area: g;
	height: calc(100% - 3px);}
.h { grid-area: h;
	height: calc(100% - 3px);}
.i { grid-area: i;
	height: calc(100% - 3px);}
.j { grid-area: j;
	height: calc(100% - 3px);}
.k { grid-area: k;
	height: calc(100% - 3px);}
.l { grid-area: l;
	height: calc(100% - 3px);}
.m { grid-area: m;
	padding-bottom: 2em;}

.gamecontainer > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.greenlayer {
	visibility: hidden;
	background: rgba(114, 140, 28, 0.66);
	width: 100%;
    height: 100%;
    padding: 2em 1em;
    z-index: 2;
    box-sizing: border-box;
}

.overinfo /* class of all the overlay divs */
	{
	position: absolute;
	visibility: hidden;
	box-sizing: border-box;
	}

.redlayer {
	visibility: hidden;
	background: rgba(169, 69, 83, 0.66);
	width: 100%;
    height: 100%;
    padding: 2em 1em;
    z-index: 2;
    box-sizing: border-box;
}

.overlaytext {
	font-family: "proxima_novaregular", arial, sans-serif;
	color: #FFFFB3;
	font-size: 2.4em;
	line-height: 130%;
	opacity: 1.0;
}

.bolder {
	font-family: "proxima_novabold", arial, sans-serif;
}

@media only screen and (max-width:1000px) {
.overlaytext {
	font-size: 2.2em;
	line-height: 120%;
}
}

@media only screen and (max-width:800px) {
	.gamecontainer {
		grid-template-areas:
    	". a a a b b b ."
    	". c c c d d d ."
    	". e e e f f f ."
    	". g g g h h h ."
    	". i i i j j j ."
    	". k k k l l l .";
}
}

@media only screen and (max-width:600px) {
	.gamecontainer {
		padding: 0 0 6em 0;
}
}

@media only screen and (max-width:520px) {
	.gamecontainer {
		padding: 0 0 5em 0;
}
	.gamecontainer {
		grid-template-areas:
    	". a a a a a a ."
    	". b b b b b b ."
    	". c c c c c c ."
    	". d d d d d d ."
    	". e e e e e e ."
    	". f f f f f f ."
    	". g g g g g g ."
    	". h h h h h h ."
    	". i i i i i i ."
    	". j j j j j j ."
    	". k k k k k k ."
    	". l l l l l l .";
}
}