teagles / middleman-starter-netlify-cms

.hero {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 42.1875%;
  background-size: cover;
  background-position: center right;
  background-color: $background-secondary-color;
  .caption {
    @extend %container;
  }

  h1 {
    @extend %column;
    @extend %col-xs-8;
    margin: 0;
    padding-top: 20%;

    @media screen and (max-width: $screen-md-max){
      padding-top: 15%;
    }
    @media screen and (max-width: $screen-xs-max){
      padding-top: 10%;
    }
  }
  @media screen and (max-width: 400px){
    padding-bottom: 50%;
  }
}