section.wrapper
	figure
		img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/149454/food1-brooke-lark.jpg', alt='food in a table')
		figcaption
			h2 Lorem ipsum 
			p
				| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iusto sequi quos hic nobis ipsa inventore eius laborum nam saepe obcaecati.
			a.hove_me(href='#')  CTA
	figure
		img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/149454/food4-maria-mekht.jpg', alt='food in a table')
		figcaption
			h2 Lorem ipsum 
			p
				| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iusto sequi quos hic nobis ipsa inventore eius laborum nam saepe obcaecati.
			a.hove_me(href='#')  CTA

@import url('https://fonts.googleapis.com/css?family=Chelsea+Market|Quicksand')

// MEDIA QUERIES
// Breakpoints
$brkpoint_sm: 1px
$brkpoint_md: 768px

// mixins
@mixin mediaQ($break)
	@if $break == "small"
		@media (min-width: $brkpoint_sm) and (max-width: $brkpoint_md)
			@content

	@else if $break == "medium"
		@media (min-width: $brkpoint_md + 1)
			@content

html, body
	margin: 0
	padding: 0
	//background: linear-gradient(left top, #4E4D5C, black)
	background: #24303e

*, *:before, *:after
	box-sizing: border-box
.wrapper
	width: 100vw
	height: 100vh
	display: flex
	flex-direction: row
	flex-wrap: no-wrap
	justify-content: center
	align-items: center
	align-content: center
	figure
		position: relative
		max-width: 500px
		width: 100%
		height: auto
		text-align: center
		overflow: hidden
		@include mediaQ(small)
			text-align: left
		&:hover figcaption
			bottom: 10em
			transform: rotate(0)
		figcaption
			position: absolute
			bottom: -22em
			left: 3em
			width: 80%
			background: rgba(253, 164, 40, .8)
			padding: 1em
			border-radius: .5em
			transition: .3s ease-out
			transform: rotate(30deg)
			overflow: hidden
			@include mediaQ(small)
				padding: .2em
				border-radius: none
				left: 0
				width: 100%
				text-align: center
				&:hover
					bottom: 0
		img
			display: block
			width: 100%
			height: auto
			transition: .5s ease
			&:hover
				// transform: scale(1.1)	
		h2
			color: white
			font-size: 2.5em
			word-spacing: -.2em
			font-family: 'Chelsea Market', cursive
			@include mediaQ(small)
				font-size: 1.5em
		p
			color: white
			margin-top: -1.2em
			font-size: 1.3em
			font-family: 'Quicksand', sans-serif
			@include mediaQ(small)
				font-size: 1em
				margin-top: .5em
		a
			color: white
			text-decoration: none
			background: green
			padding: 1em
			border-radius: .6em .6em 0 0
			transition: .3s ease-out
			@include mediaQ(small)
				font-size: .8em
			&:hover
				background: rgba(51, 72, 50, 1.00)