About tiles

src/scss/components/_images.scss

@@ -68,32 +68,67 @@
 	}
 }
 
-.tile {
-	@include grid_item( 2 );
-	color: $dark_grey;
-	text-align: center;
-	position: relative;
-	z-index: 1;
-	float: left;
-	padding-top: 16%;
-	font-size: 16px;
+.tiles {
+	padding-bottom: 60px;
 
-	&:before {
-		content: '';
-		display: block;
-		position: absolute;
-		top: 0;
-		width: 100%;
-		padding-bottom: 100%;
-		background: $light_grey;
-		z-index: -1;
-	}
+	.tile {
+		color: $dark_grey;
+		text-align: center;
+		position: relative;
+		z-index: 1;
+		float: left;
+		overflow: hidden;
 
-	.fa {
-		display: block;
-		font-size: 40px;
-		opacity: 0.2;
-		z-index: 0;
-		padding-bottom: 10px;
+		.text {
+			display: block;
+			position: absolute;
+			top: 50%;
+			left: 10%;
+			right: 10%;
+			vertical-align: top;
+			margin-top: -12px;
+			font-size: 16px;
+			z-index: 2;
+
+			.fa {
+				display: block;
+				position: absolute;
+				top: 50%;
+				left: 10%;
+				right: 10%;
+				text-align: center;
+				margin-top: -27px;
+				font-size: 60px;
+				z-index: -1;
+				color: $faint_grey;
+			}
+		}
+
+		&:before {
+			content: '';
+			display: block;
+			width: 100%;
+			padding-bottom: 100%;
+			background: $light_grey;
+			z-index: -2;
+		}
+
+		@include responsive( null, $bp_medium ){
+			@include grid_item( 2 );
+		}
+
+		@include responsive( $bp_medium ){
+			@include grid_item( 3 );
+		}
+
+		@include responsive( $bp_narrow ){
+			.text {
+				font-size: 14px;
+				.fa {
+					font-size: 28px;
+					margin-top: -12px;
+				}
+			}
+		}
 	}
 }