.imagegrid {}

.imagegrid .items {
	display: flex;
	flex-wrap: wrap;
}

.imagegrid .items .item {
	position: relative;
	flex: 1;
	flex-basis: 25%;
}

.imagegrid.layout-three-columns .items .item {
	flex-basis: 33.33%;
}

.imagegrid .content {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 3;
	background-color: rgba(52, 58, 67, .55);
}
.imagegrid .content .icon { margin-bottom: 10px; }
.imagegrid .content .title { font-size: 48px; line-height: 48px; color: #FFF; font-family: 'TradeGothicLTCom Bold Condensed', sans-serif; text-align: center; margin: 0px auto; max-width: 240px; text-transform: uppercase; }
.imagegrid .background img { width: 100%; display: block; }

.imagegrid .content.none { background-color: transparent; }
.imagegrid .content.blue { background-color: rgba(52, 58, 67, .55); }
.imagegrid .content.teal { background-color: rgba(35, 102, 109, .55); }
.imagegrid .content.purple { background-color: rgba(66, 76, 123, .55); }
.imagegrid .content.yellow { background-color: rgba(78, 103, 47, .55); }
.imagegrid .content:hover { background-color: transparent; }

@media only screen and (max-width: 64.063em) {
	.imagegrid .items .item, 
	.imagegrid.layout-two-columns-medium .items .item {
		flex-basis: 50%;
	}
	.imagegrid .content .title {
	    font-size: calc(26px + (48-26)*(100vw - 640px) / (1025-640));
	    line-height: calc(24px + (48-24)*(100vw - 640px) / (1025-640));
	}	
	.imagegrid .content .icon { 
		margin-bottom: 5px; 
	}
}

@media only screen and (max-width: 40.063em) {
	.imagegrid .items .item,
	.imagegrid.layout-two-columns-medium .items .item,
	.imagegrid.layout-three-columns .items .item {
		flex-basis: 100%;
	}
	.imagegrid .content .title {
	    font-size: calc(30px + (48-30)*(100vw - 320px) / (640-320));
	    line-height: calc(28px + (48-28)*(100vw - 320px) / (640-320));
	}	
	.imagegrid .content .icon { 
		margin-bottom: 10px; 
	}
}