.container-fluid
	.col-lg-6.col-lg-offset-0.col-md-6.col-md-offset-0.col-sm-10.col-sm-offset-1.col-xs-12
		figure
			.media(style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/bg_15.png)")
			figcaption
				svg(viewBox="0 0 200 200" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg")
					defs
						mask(id="mask" x="0" y="0" width="100%" height="100%")
							//- alpha rectangle
							rect(id="alpha" x="0" y="0" width="100%" height="100%")
							//- All text that you want
							text(class="title" dx="50%" dy="2.5em") ENJOY
							text(class="title" dx="50%" dy="3.5em") EVERY
							text(class="title" dx="50%" dy="4.5em") MOMENT
					rect(id="base" x="0" y="0" width="100%" height="100%")
				.body
					p Enamel pin selvage health goth edison bulb, venmo glossier tattooed hella butcher cred iPhone.
			a(href="#")
	.col-lg-6.col-md-6.hidden-sm.hidden-xs
		figure
			.media(style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/bg_5.png)")
			figcaption
				svg(viewBox="0 0 200 200" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg")
					defs
						mask(id="mask" x="0" y="0" width="100%" height="100%")
							//- alpha rectangle
							rect(id="alpha" x="0" y="0" width="100%" height="100%")
							//- All text that you want
							text(class="title" dx="50%" dy="2.5em") ENJOY
							text(class="title" dx="50%" dy="3.5em") EVERY
							text(class="title" dx="50%" dy="4.5em") MOMENT
					rect(id="base" x="0" y="0" width="100%" height="100%")
				.body
					p Enamel pin selvage health goth edison bulb, venmo glossier tattooed hella butcher cred iPhone. Plaid skateboard man braid wayfarers.
			a(href="#")

@import url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/library.less");
@import url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/variables.less");
@body: #252830;
body {
	background-color: @body;
	color: white;
	font-family: "Lato";
}

.container-fluid {
	.center;
	width: 100%;
}

.media {
	background-position: center;
	background-size: cover;
	height: 100%;
	position: absolute;
	transition: all 0.3s ease;
	width: 100%;
}

figure {
	height: 370px;
	overflow: hidden;
	position: relative;
	a {
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 3;
	}
	
	&:hover .media {
		transform: scale(1.25);
	}
}

figcaption {
	color: @body;
	height: ~"calc(100% - 30px)";
	margin: 15px;
	left: 0;
	position: absolute;
	top: 0;
	width: 250px;
}

.body {
	background-color: white;
	bottom: 0;
	padding: 15px;
	position: absolute;
	width: 100%;
}

svg {
	height: inherit;
	width: 100%;
	text {
		text-anchor: middle;
	}
	#alpha {
		fill: white;
	}
	.title {
		font-size: 28px;
		font-family: "Montserrat";
		letter-spacing: 5px;
	}
	#base {
		fill: white;
		-webkit-mask: url(#mask);
		mask: url(#mask);
	}
}