%h1 Hexagon Grid
	
.grid
	.grid--item
		.img{ :style => "background-image: url(https://images.unsplash.com/photo-1417436026361-a033044d901f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=faa4e192f33e0d6b7ce0e54f15140e42);"}
		.container 
			%h2 Snowy Hills
			.desc Photo by Ales Krivec
	.grid--item
		.img{ :style => "background-image: url(https://images.unsplash.com/44/MIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=49dab7a5e4b2e28b5707bc2db974c94b);"}
		.container 
			%h2 Bear
			.desc Photo by Thomas Lefebvre
		
	.grid--item
		.img{ :style => "background-image: url(https://images.unsplash.com/photo-1425668273332-3a46ab26b161?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=d453ab3dec298c43415526458b360fa6);"}
		.container 
			%h2 Owl
			.desc Photo by photostockeditor
			
	.grid--item
		.img{ :style => "background-image: url(https://images.unsplash.com/photo-1423145369430-a9ea0de096cd?crop=entropy&fit=crop&fm=jpg&h=1375&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1725);"}
		.container 
			%h2 Horse
			.desc Photo by Annie Spratt	
	
	.grid--item
		.img{ :style => "background-image: url(https://images.unsplash.com/photo-1432887382605-0abf9cc49e8f?crop=entropy&fit=crop&fm=jpg&h=1375&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1725);"}
		.container 
			%h2 Ice & Penguin
			.desc Photo by Teodor Bjerrang
			
	.grid--item
		.img{ :style => "background-image: url(https://images.unsplash.com/photo-1417026846249-f31f7e43fc35?crop=entropy&fit=crop&fm=jpg&h=1375&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1725);"}
		.container 
			%h2 Pile of Logs
			.desc Photo by Ales Krivec
			
	.grid--item
		.img{ :style => "background-image: url(https://images.unsplash.com/uploads/14122811862445bc266cf/931448f2?crop=entropy&fit=crop&fm=jpg&h=1375&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1725);"}
		.container 
			%h2 Winter Tree
			.desc Photo by Mikael Kristenson

@import url(https://fonts.googleapis.com/css?family=Arapey:400italic);

body {
	background: #dedede;
	-webkit-font-smoothing: antialiased;
	min-width: 1200px;
}

.grid {
	padding: 60px;
	margin: 0 auto;
	max-width: 1200px;
}

.grid--item {
	position: relative;
	margin-top: -90px;
	margin-right: 5px;
	margin-left: 5px;
	width: calc(33.33% - 10px);
	float: left;
	//border-left: 4px solid #dedede;
	//border-right: 4px solid #dedede;
	transition: all 0.5s;
	
	overflow: hidden;
	
	 -webkit-clip-path: polygon(
    50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
  );
 
  clip-path: polygon(
    50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
  );
	
	-webkit-shape-outside:   polygon(
    50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
  );
	
	&:before {
		display: block;
		padding-top: 112.5%;
		content: '';
	}
	
	&:nth-child(1),
	&:nth-child(2) { margin-top: 0; }
	
	&:nth-child(7n - 1),
	&:nth-child(1) {
		margin-left: 185px;
	}
}

.img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	background-position: center center;
	background-size: cover;
	
	overflow: hidden;
	
	-webkit-clip-path: polygon(
			50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
		);
 	
		clip-path: polygon(
			50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
		);
	
	&:before,
	&:after {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		content: '';
		opacity: 0;
		transition: opacity 0.5s;
	}
	
	&:before {
		background: rgba(purple, 0.25);
	}
	
	&:after {
		background: linear-gradient(to top, transparent, rgba(black, 0.5), transparent);
	}
}

.container { 
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	
	opacity: 0;
	text-align: center;
	color: white;
	will-change: transform;
	backface-visibility: hidden;
	transform: translate(-50%, -50%) scale(0.9);
	transition: all 0.5s;
	
	-webkit-shape-outside:   polygon(
    50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
  );
	
	shape-outside:   polygon(
    50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
  );
}

h1,
h2 {
	font-family: 'Arapey';
	font-style: italic;
	font-weight: 400;
}

h1 {
	margin-top: 90px;
	text-align: center;
	font-size: 56px;
	color: #242424;
}

h2 {
	font-size: 32px;
	
	&:before,
	&:after {
		display: inline-block;
		margin: 0 0.5em;
		width: 0.75em;
		height: 0.03em;
		background: turquoise;
		content: '';
		vertical-align: middle;
		transition: all 0.3s;
	}
}

.desc {
	margin: 1em 0 0;
	font-family: 'ATC Overlook';
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 11px;
	line-height: 1.5;
	color: turquoise;
}


.grid--item:hover {

	.img:before,
	.img:after,
	.container { opacity: 1; }
	
	.container { transform: translate(-50%, -50%) scale(1); }
}