.grid-container {
  display: grid;
  grid-template-columns: 250px 250px 250px 250px;
  grid-template-rows: 250px 250px 250px 1250px;
  gap: 0px 0px;
  grid-template-areas:
    "g1 g2 g3 g4"
    "g5 g6 g7 g8"
	"g9 g10 g11 g12"
	"j1 j1 j1 j1";
}

.l1 { grid-area: j1; text-align:center; padding-top: 400px; }
.b1 { grid-area: g1; }
.b2 { grid-area: g2; }
.b3 { grid-area: g3; }
.b4 { grid-area: g4; }
.b5 { grid-area: g5; }
.b6 { grid-area: g6; }
.b7 { grid-area: g7; }
.b8 { grid-area: g8; }
.b9 { grid-area: g9; }
.b10 { grid-area: g10; }
.b11 { grid-area: g11; }
.b12 { grid-area: g12; }

.fit {
    width: 100%;
	
    height: 100%;
}

@media screen and (max-width: 700px){
	.grid-container {
	  display: grid;
	  grid-template-columns: 125px 125px 125px;
	  grid-template-rows: 125px 125px 125px 125px 125px;
	  gap: 0px 0px;
	  grid-template-areas:
	    "g1 g2 g3"
	    "g4 g5 g6"
		"g7 g8 g9"
		"g10 g11 g12"
		"j1 j1 j1";
	}

	.l1 { grid-area: j1; text-align:center; padding-top: 400px; }
	
	.logo { width: 228px; height: 187px;}
}

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}