.hero {
  $hero-background-top: #7F99BE; 
  $hero-background-bottom: #20392B;
  $hero-color: white;
  $gradient-angle: 10deg;
  $hero-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png';

  @include background(url($hero-image), linear-gradient($gradient-angle, $hero-background-bottom, $hero-background-top), no-repeat $hero-background-top scroll);

  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  padding-bottom: 4em;

  .hero-logo img {
    height: 3em;
    margin-bottom: 2.5em;
  }

  .hero-inner {
    @include outer-container;
    @include clearfix;
    padding: 3em;
    margin: auto;
    text-align: center;
    color: $hero-color;

    .hero-copy {
      text-align: center;
      
      h1 {
        font-size: 1.6em;
        margin-bottom: .5em;

        @include media($large-screen) {
          font-size: 1.8em;
        }
      }

      p {
        font-family: $serif;
        margin: auto;
        margin-bottom: 3em; 
        font-weight: 200;
        line-height: 1.4em;

        @include media($large-screen) {
          font-size: 1.1em;
          max-width: 40%;
        }
      }
    }
  }
}