.section-hero {
  position: relative;

  .page-width {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-top: 117px;
  }
  
  .video-wrapper {
    position: relative;
    padding-bottom: 62.5%;
  }
  
  .button {
    margin-bottom: 15px;
  }

  @media only screen and (max-width: 767px) {
    .page-width {
      padding-top: 67px;
    }
  }
}

.section-hero__heading {
  margin: 0 0 25px;

  @media only screen and (max-width: 767px) {
    margin: 0 0 16px;
  }
}

.section-hero__text-holder {
  margin: 0 auto;
  max-width: 660px;
  position: relative;
  z-index: 2;
  
  @media only screen and (max-width: 767px) {
    max-width: 280px;
  }
}


.section-hero__media-holder {
  max-width: 828px;
  margin: -39px auto 0;
  overflow: hidden;

  .bg-video {
    margin: 0 -1px;
  }

  img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  &.section-hero__media--has-video {
    max-width: 800px;
    overflow: hidden;

    .bg-video {
      margin-bottom: -55px;
    }
  }

  @media only screen and (max-width: 767px) {
    margin: 2px -4px 0;

    &.section-hero__media--has-video {
      margin: 2px 2px 0;

      .bg-video {
        margin-bottom: -17px;
      }
    }
  }
}