.marketing {
  /*Background image and overaly effects*/
  .hero {
    position: relative;
    .hero-author-note {
      display: none;
    }
    @include breakpoint(br-768 up) {
      height: 400px;
    }
    @include breakpoint(large up) {
      height: 750px;
      position: relative;
      .hero-author-note {
        display: block;
        font-weight: bold;
        line-height: 12px;
        font-size: 10px;
        color: white;
        letter-spacing: 0.42px;
        text-align: left;
        position: absolute;
        right: 46px;
        bottom: 30px;
        z-index: 20;
      }
    }

    .heading {
      font-weight: bold;
    }

    .hero-image {
      position: absolute;
      height: 280px;
      background-image: url("/images/live-hero.jpg");
      background-size: cover;
      width: 100%;
      background-position: center 38%;
      background-repeat: no-repeat;

      @include breakpoint(br-768 up) {
        height: 400px;
        background-position: center center;
      }
      @include breakpoint(large up) {
        height: 750px;
        background-position: center center;
      }

      .overlay {
        z-index: 1;
        position: absolute;
        width: 100%;
        opacity: 0.4;
        -webkit-filter: blur(10px);
        filter: blur(10px);

        &.top {
          top: 0;
          background-image: linear-gradient(to top, rgba(0, 0, 0, 0), #000000);
          @include breakpoint(br-768 up) {
            height: 120px;
          }
          @include breakpoint(large up) {
            height: 220px;
          }
        }

        &.bottom {
          bottom: 10px;
          pointer-events: none;
          height: 280px;
          background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);
          @include breakpoint(br-768 up) {
            height: 200px;
          }
          @include breakpoint(large up) {
            height: 380px;
          }
        }
      }
    }
  }
}
.desktop-max-width-520 {
  @include breakpoint(large up) {
    max-width: 520px !important;
  }
}