.masthead {
  min-height: 30rem;
  position: relative;
  display: table;
  width: 100%;
  height: auto;
  padding-top: 8rem;
  padding-bottom: 8rem;
  background: linear-gradient(90deg, fade-out($white, 0.9) 0%, fade-out($white, 0.9) 100%), url('../img/bg-masthead.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  h1 {
    font-size: 4rem;
    margin: 0;
    padding: 0;
  }
  @media (min-width: 992px) {
    height: 100vh;
    h1 {
      font-size: 5.5rem;
    }
  }
}