.hero-component {
  background: white;
  
  .background-wrapper {
    background-image: url('/images/mobile-bg.jpg');
  }
  .logo-overlay {
    display: none;
  }
  .lead {
    @include rem(font-size, 26px);
    @extend %font-huge;
    margin: 0;
    height: 400px;
    padding-bottom: 0;
    font-weight: bold;
    line-height: 30px;
  }
  .follow {
    @extend %font-roboto;
    @include rem(font-size, 14px);
    font-weight: normal;
    color: $medium-grey-2;
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 22px;
  }
  @media (min-width: $tablet) {
    .title {
      padding-top: 40px;
      text-align: center;
    }
    .lead {
      @include rem(font-size, 53px);
      line-height: 60px;
    }
  }
  
  @media (min-width: $desktop) {
    .background-wrapper {
      background-image: url('/images/hero-full.svg');
      height: calc(100vh - 80px);
    }
    .lead {
      @include rem(font-size, 70px);
      width: 75%;
      max-width: 1100px;
      height: 700px;
      padding-top: 80px;
      line-height: 90px;
    }
    .logo-overlay {
      display: flex;
      position: relative;
      bottom: 60px;
    }
    .follow {
      @include rem(font-size, 20px);
      line-height: 30px;
      color: $text-dark-grey;
      padding: 0 6em;
    }
  }
}
