.masthead {
  position: relative;
  overflow: hidden;
  padding-bottom: 3rem;
  .masthead-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: fade-out($primary, 0.2);
    transform: skewY(4deg);
    transform-origin: bottom right;
  }
  .masthead-content {
    h1 {
      font-size: 2.5rem;
    }
    p {
      font-size: 1.2rem;
      strong {
        font-weight: 700;
      }
    }
    .input-group-newsletter {
      input {
        font-size: 1rem;
        padding: 1rem;
      }
      button {
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 1rem;
      }
    }
  }
}

@media (min-width: 768px) {
  .masthead {
    height: 100%;
    width: 40.5rem;
    padding-bottom: 0;
    .masthead-bg {
      transform: skewX(-8deg);
      transform-origin: top right;
    }
    .masthead-content {
      padding-left: 3rem;
      padding-right: 10rem;
      h1 {
        font-size: 3.5rem;
      }
      p {
        font-size: 1.3rem;
      }
    }
  }
}