.grid-item {
	width: 25%;
	height: 200px;
	background: #668672;
	color: #ffffff;
	border: 7px solid #ffffff;
	background-size: 103%;
	background-position: center;
	background-repeat: no-repeat;
	-moz-transition: background-size 500ms ease;
	-webkit-transition: background-size 500ms ease;
	transition: background-size 500ms ease;
}

.grid-item--width2 {
	width: 50%;
}

.grid-item--height2 {
	height: 400px;
}

.grid-item--height3 {
	height: 600px;
}

.text-overlay {
	height: 100%;
	color: #ffffff;
	background-color: transparent;
	position: absolute;
	top: 0;
	z-index: 10;
	width: 100%;
	text-align: center;
	opacity: 0;
	-moz-transition: opacity 250ms ease;
	-webkit-transition: opacity 250ms ease;
	transition: opacity 250ms ease;
}

.text-overlay h3 {
	font-size: 29px;
	margin-bottom: 20px;
	line-height: 1.2em;
	font-weight: 600;
	text-transform: uppercase;
	color: #ffffff;
	z-index: 10;
	position: absolute;
	top: 40%;
	left: 0;
	width: 100%;
	-moz-transition: font-size 250ms ease;
	-webkit-transition: font-size 250ms ease;
	transition: font-size 250ms ease;
}

.overlay {
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0;
	position: absolute;
	top: 0;
	z-index: 5;
	-moz-transition: opacity 250ms ease;
	-webkit-transition: opacity 250ms ease;
	transition: opacity 250ms ease;
}

.grid-item:hover {
	background-size: 101%;	
	-moz-transition: background-size 500ms ease;
	-webkit-transition: background-size 500ms ease;
	transition: background-size 500ms ease;
}

.grid-item:hover .text-overlay {
	opacity: 1;
	-moz-transition: opacity 250ms ease;
	-webkit-transition: opacity 250ms ease;
	transition: opacity 250ms ease;

}
.grid-item:hover .text-overlay h3 {
	font-size: 32px;
	-moz-transition: font-size 250ms ease;
	-webkit-transition: font-size 250ms ease;
	transition: font-size 250ms ease;
}
.grid-item:hover .overlay {
	opacity: 0.5;
	-moz-transition: opacity 250ms ease;
	-webkit-transition: opacity 250ms ease;
	transition: opacity 250ms ease;
}
@media only screen and ( max-width: 1440px ) {
	.grid-item {
		background-size: 129%;
	}
	.grid-item:hover {
		background-size: 126.5%;	
		-moz-transition: background-size 500ms ease;
		-webkit-transition: background-size 500ms ease;
		transition: background-size 500ms ease;
	}
	.text-overlay h3 {
		font-size: 24px;
	}
	.grid-item:hover .text-overlay h3 {
		font-size: 27px;
	}
}
@media only screen and ( max-width: 1025px ) {
	.grid-item {
		width: 50%;
		height: 250px;
		border-width: 4px;
	}
	.grid-item:nth-child(1), .grid-item:nth-child(3), .grid-item:nth-child(5) {
		border-left-width: 8px;
	}	
	.grid-item:nth-child(2), .grid-item:nth-child(4), .grid-item:nth-child(6) {
		border-right-width: 8px;
	}
	.grid-item--width2 {
		width: 50%;
	}
	.grid-item--height2 {
		height: 250px;
	}
	.grid-item--height3 {
		height: 600px;
	}
	.text-overlay {
		opacity: 1;
	}
	.text-overlay h3 {
		top: 40%;
		font-weight: 900;
	}
	.overlay {
		opacity: 0.4;
	}
}
@media only screen and ( max-width: 480px ) {
	.grid-item {
		width: 100%;
		height: 220px;
		border-width: 2px;
	}
	.grid-item:nth-child(1), .grid-item:nth-child(3), .grid-item:nth-child(5) {
		border-left-width: 4px;
	}	
	.grid-item:nth-child(2), .grid-item:nth-child(4), .grid-item:nth-child(6) {
		border-right-width: 4px;
	}
	.grid-item--width2 {
		width: 100%;
	}
	.grid-item--height2 {
		height: 220px;
	}
	.grid-item--height3 {
		height: 768px;
	}
	.text-overlay h3 {
		font-size: 1.875em;
	}
	.overlay {
		opacity: 0.3;
	}
}