.quadrantWrapper div:nth-child(1) div {
	width: 97%;
	height: 96.7%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.quadrantWrapper div:nth-child(2) div {
	width: 97%;
	height: 96.7%;
	top: 0;
	left: 3%;
	right: 0;
	bottom: 0;
}
.quadrantWrapper div:nth-child(3) div {
	width: 97%;
	height: 96.7%;
	top: 3.5%;
	left: 0;
	right: 0;
	bottom: 0;
}
.quadrantWrapper div:nth-child(4) div {
	width: 97%;
	height: 96.7%;
	top: 3.5%;
	left: 3%;
	right: 0;
	bottom: 0;
}

.quadrantWrapper div div {
	position: absolute;
	background-repeat:no-repeat;
	background-image:-webkit-linear-gradient(
		top left,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 37%,
		rgba(255, 255, 255, 0.8) 45%,
		rgba(255, 255, 255, 0.0) 50%
	);
	background-image:-moz-linear-gradient(
		0 0,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 37%,
		rgba(255, 255, 255, 0.8) 45%,
		rgba(255, 255, 255, 0.0) 50%
	);    
	background-image:-o-linear-gradient(
		0 0,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 37%,
		rgba(255, 255, 255, 0.8) 45%,
		rgba(255, 255, 255, 0.0) 50%
	);
	background-image:linear-gradient(
		0 0,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.2) 37%,
		rgba(255, 255, 255, 0.8) 45%,
		rgba(255, 255, 255, 0.0) 50%
	);
	background-position:100% 100%, 0 0;
	-moz-background-size:250% 250%, 100% 100%;
		 background-size:250% 250%, 100% 100%;
	-webkit-transition:background-position 0s ease;
	   -moz-transition:background-position 0s ease;       
		 -o-transition:background-position 0s ease;
			transition:background-position 0s ease;
}

.quadrantWrapper div div:hover,
.quadrantWrapper div div:focus {
	color:#fff;
	background-position:0 0, 0 0;
	-webkit-transition-duration:0.5s;
	   -moz-transition-duration:0.5s;
			transition-duration:0.5s;
}

.quadrantWrapper div {
  width: 50%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.quadrantWrapper div:after {
  padding-top: 50%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

.quadrantWrapper {
    width: calc(100vw - 200px); 
    height: calc(50vw - 200px);
    max-height: calc(100vh - 200px);
    max-width: calc(200vh - 200px);
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
}