.swiper.hero-slider .swiper-slide,
.nextvital-hero-banner{
    position: relative;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    margin-bottom: -10px;
    display: flex;
    align-items: end;
   
    @media screen and (min-width: 990px) {
      max-height: 550px;
    }
    @media screen and (min-width: 1500px) {
      max-height: 600px;
    }
    @media screen and (min-width: 2050px) {
      max-height: 800px;
    }

    .nextvital-hero-video-wrapper{
      position: relative;
      width: 100%;
      display: flex;

      @media screen and (max-width: 1100px) {

        > video{
          position: absolute;
          width: 100%;
          height: 500px;
          top: 0;
          right: 0;
        }
      }
      
      img.nextvital-hero-bg-image{
        object-fit: cover;
        object-position: center top;
        width: 100%;
        height: auto;
        
        @media screen and (max-width: 1100px) {
          position: relative;
          width: 100%;
          height: auto;
          top: 0;
          left: 0;
        }
        @media screen and (max-width: 1440px) {
          &.hide-on-mobile{
            display: none;    
          }
        }

        &.tablet-image{
          display: none;

          @media screen and (max-width: 1440px) and (min-width: 900px) {
            display: block;
          }
        }
        
        &.mobile-image{
          display: none;
          @media screen and (max-width: 900px) {
            display: block;
          }
        }
      }

      .nextvital-hero-video{
        object-fit: cover;
        object-position: center top;
        width: 100%;
        height: 100%;
        @media screen and (max-width: 1920px) {
            width: auto;
        }
      }
    }
      
    .nextvital-hero-banner-content-wrapper{
        position: absolute;
        max-width: 1340px;
        padding: 0 20px;
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
        bottom: 40px;
        z-index: 100;
        @media screen and (max-width: 1340px) {
          margin-left: 20px;      
        }
        @media screen and (max-width: 768px) {
          bottom: 20px;
          margin-left: unset;
        }

        > .nextvital-headline-underline,
        > .nextvital-headline-overline{
            color: #FFF;
            font-family: Mulish;
            font-size: 24px;
            font-style: normal;
            font-weight: 700;
            line-height: 32px;
            margin: 0 0 16px 0;
            @media screen and (max-width: 768px) {
              margin-bottom: 8px;
              font-size: 20px;
              line-height: 28px;
            }
            &.enable-short-text{
              max-width: 600px;
            }
            > p{
              color: inherit;
              margin-top: 0;
              margin-bottom: 16px;
            }
        }

        > .nextvital-headline-underline{
          font-size: 18px;
          line-height: normal;
        }

        > .nextvital-headline > h1{
            color: #FFF;
            font-family: Mulish-ExtraBold, Mulish;
            font-size: 48px;
            font-style: normal;
            font-weight: 800;
            line-height: 58px;
            margin: 0 0 24px 0;
            @media screen and (max-width: 768px) {
              font-size: 48px;
              margin-bottom: 16px;
            }
            @media screen and (max-width: 568px) {
              font-size: 40px;
              line-height: 48px;  
            }
            &.enable-short-text{
              max-width: 600px;
            }
            &.title-size-middle{
              font-size: 32px;
              line-height: 38px;
              @media screen and (max-width: 568px) {
                font-size: 24px;
                line-height: 32px;
              }
            }
        }

        a.button.button--primary{
          z-index: 400;
          min-width: 250px;
          max-width: fit-content;
        }

        a.button.text-link{
          /*
          margin-top: 24px;
          @media screen and (max-width: 568px) {
            margin-top: 16px;
          }
            */
        }
    }
    a.teaser-link,
    a.teaser-content-link{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }

    a.teaser-content-link{
      z-index: 300;
    }
}