.hover-tile-outer {
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-color: gainsboro !default;
  $base-line-height: 1.5em !default;
  $medium-screen: em(640) !default;
  
  h4 {
    margin: 0;
  }

  p {
    line-height: $base-line-height;
  }
  //////////////////////////////////////////////////////////////////////////////////

  $hover-tile-height: 10em;

  background: url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png");
  background-position: top;
  background-size: cover;
  background-color: beige;
  border: 1px solid $base-border-color;
  cursor: pointer;
  height: $hover-tile-height;
  margin-bottom: $base-line-height;
  
  @include media($medium-screen) {
    width: 40%;
  }

  .hover-tile-container {
    height: $hover-tile-height;
    overflow: hidden;
  }

  .hover-tile-container:hover > .hover-tile {
    @include transform(translate(0, -100%));
  }

  .hover-tile {
    @include transition(all, 0.2s ease-in-out);
    background: inherit;
    color: white;
    height: inherit;
    overflow: hidden;
    padding: $base-spacing;
  }

  .hover-tile-hidden {
    background: transparentize(#000, 0.5);

    p {
      color: transparentize(#fff, 0.3);
    }

    h4 {
      margin-bottom: 0.5em;
    }
  }
}