.side-image
  ///////////////////////////////////////////////////////////////////////////////////
  $base-line-height: 1.5em !default
  $base-accent-color: #477DCA !default
  $base-link-color: $base-accent-color !default
  $dark-gray: #333 !default
  $large-screen: em(860) !default
  $base-font-color: $dark-gray !default
  p
    color: $base-font-color
    line-height: $base-line-height
  //////////////////////////////////////////////////////////////////////////////////
  $side-image-background-top: #B5EBEB
  $side-image-background-bottom: #5DAC5D
  $side-image-content-background: #F9F9F9
  $side-image-border: 1px solid darken(transparentize($side-image-background-bottom, 0.8), 30%)
  background: $side-image-content-background
  +media($large-screen)
    +row(table)

  .images-wrapper
    +background(url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png"), linear-gradient($side-image-background-top, $side-image-background-bottom), no-repeat $side-image-background-top scroll)
    background-color: $side-image-background-top
    background-size: cover
    border-bottom: $side-image-border
    display: block
    min-height: 12em
    padding: 3em
    +media($large-screen)
      +span-columns(4)
      background-position: bottom
      background-size: cover
      border-right: $side-image-border
  .side-image-content
    +span-columns(12)
    padding: 1em 1em 4em 1em
    +media($large-screen)
      +span-columns(8)
      padding: 4em 4em 8em 4em

    h1
      margin-bottom: 0.9em
    h4
      background: #BBB
      color: white
      display: inline-block
      font-size: 0.75em
      font-weight: 800
      margin-bottom: 1.3em
      padding: 3px 8px
      text-transform: uppercase
    p
      color: gray
      margin-bottom: 3em
    button
      +button(flat, $base-accent-color)
      padding: 0.7em 1em
  +reset-display