.video-section.ybl-video-hero-section{
      position: relative;
      width: 100vw;
      overflow: hidden;
      height: 560px;

      &.ybl-height-small{
         height: 350px;
         .nxv-hero-image{
           background-position: right bottom;
           @media (max-width: 768px) {
              background-position: left bottom;
            }
         } 
      }

    .ybl-hero-content-wrapper{
        position: absolute;
        max-width: 1300px;
        width: 100%;
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 200;

        .ybl-hero-teaser{
            position: absolute;
            bottom: 10%;
            left: 0;
            color: #FFFFFF;
            text-align: left;
            @media (max-width: 1340px) {
              padding: 0 20px;
            }
            h1{
                color: #FFFFFF;
                font-size: 80px;
                line-height: 88px;
                margin: 0 0 12px 0;
    
                @media (max-width: 868px) {
                  font-size: 40px;
                  line-height: 48px;
                }
            }
            h3.ybl-hero-teaser-text{
                font-size: 27px;
                line-height: 40px;
                margin: 0 0 50px 0;
                color: #FFFFFF;
              
                @media (max-width: 868px) {
                  font-size: 20px;
                  line-height: 28px;
                }
            }

            a.ybl-video-hero-button{
                color: #000;
                background-color: #033E46;
                padding: 0.75rem 1.5rem;
                font-size: 24px;
                font-weight: 400;
                display: inline-block;
                text-decoration: none;
            }

        }
    }

    > video.nxv-vitamind-hero-video{
        position: absolute;
        width: 100vw;
        height: auto;
        top: 0;
        left: 0;

      @media screen and (max-width: 990px) {
        width: auto;
        height: 100%;
        
      }
    }

    > .nxv-hero-image{
      background-size: cover;
      width: 100%;
      height: 100%;
      background-position: center center;
      display: block;
    }

     &.use-mobile-image{
       > .nxv-hero-image.desktop-image{
         display: none;
         @media screen and (min-width: 568px) {
           display: block;
         }
         
       }
       > .nxv-hero-image.mobile-image{
         display: block;
         @media screen and (min-width: 568px) {
           display: none
         }
       }
     }
}