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)