/*Layout 1*/
.lipidtech {
  .productHeroSmallWrapper {
    .productHeroBg {
      &.--bg-gradient {
         background: var(--bg-gradient-yellow);
       }
    }
    .--hf-display-1, .--hf-display-2, .--hf-display-3 {
      & strong {
        color: var(--hf-dark-800)!important;
      }
    }
  }
  .hero-wrapper {
    .hero-bg {
      background: var(--bg-gradient-yellow);
    }
    .hero-inner-wrapper {
      .--hf-display-1, .--hf-display-2, .--hf-display-3 {
        & strong {
          color: var(--hf-dark-800)!important;
        }
      }
    }
  }
}

.hf_group {
  .hero-wrapper {
    .hero-inner-wrapper {
      .--hf-display-1, .--hf-display-2, .--hf-display-3 {
        p {
          color: var(--hf-white-100);
        }
      }
    }
  }
}

.hero-wrapper {
  position: relative;
  /*@media only screen and (max-width: 600px) {
    height: 90vh!important;
  }
  @media only screen and (min-width: 600px) and (max-width: 992px){
    height: calc(80vh + 200px)!important;
  }*/
  .hero-bg {
    background: var(--bg-gradient-blue);
    height: calc(80vh);
    @media only screen and (min-width: 992px) {
      height: calc(80vh + 200px);
    }
    .hero-bg-image {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
  }
  .hero-inner-wrapper {
    position: absolute;
    top: 125px;
    left: 0;
    right: 0;
    width: 100%;
    margin: auto;
    padding-top: 120px;
    @media only screen and (min-width: 992px) {
      padding-top: 200px;
    }
    .--hf-display-1, .--hf-display-2, .--hf-display-3 {
      color: white;
      text-transform: uppercase;
      p {
        font-weight: var(--headlines-weight);
        hyphens: auto;
        @media (max-width: 992px) {
          font-size: var(--font-size-lg);
        }
      }
      @media only screen and (max-width: 600px) {
        font-size: var(--font-size-l);
      }
      & strong {
        color: var(--hf-blue-400);
        font-weight: var(--headlines-weight);
      }
    }
    .hero-content-wrapper {
      .hero-video-wrapper {
        margin-block-start: 60px;
        /*height: 880px;*/
        @media only screen and (max-width: 600px) {
          height: auto;
        }
        video, img {
          width: 100%;
          height: 100%;
          /*object-fit: cover;*/
        }
      }
    }
  }
}
/*Layout 2 und Layout 3*/
.productHeroSmallWrapper {
  position: relative;
  overflow: hidden;
  @media only screen and (min-width: 800px) {
    min-height: 750px; /* Minimum height for desktops */
  }
  &.noContent{
    min-height: 260px;
  }
  .productHeroBg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    &.--bg-gradient {
      background: var(--bg-gradient-blue);
    }
    img {
      opacity: .7;
      mix-blend-mode: overlay;
    }
  }
  .productHeroSmallWrapperContent {
    position: relative; /* Allow content to flow naturally */
    top: 0;
    left: 0;
    right: 0;
    height: auto; /* Dynamic height for content */
    padding-block: 140px; /* Consistent padding */
    @media only screen and (max-width: 800px) {
      padding-block: 150px; /* Reduce padding for smaller screens */
    }
    .--hf-display-1, .--hf-display-2, .--hf-display-3 {
      color: var(--hf-white-100);
      p {
        hyphens: auto;
        @media (max-width: 992px) {
          font-size: var(--font-size-lg);
        }
      }
    }
    .btn {
      width: fit-content;
    }
    .productHeroSmallImageWrapper {
      height: 490px;
      overflow: hidden;
      img {
        width: 100%;
        object-fit: cover; /* Maintain image proportions */
      }
    }
  }
  &.layout-2 {
    position: relative;
    overflow: hidden;
    .productHeroSmallWrapperContent {
      padding-block: 150px 90px;
      @media only screen and (min-width: 800px) {
        padding-block: 240px 90px;
      }
    }
  }
  &.layout-3 {
    .productHeroSmallWrapperContent {
      padding-block: 170px 90px;
    }
    .productHeroSmallImageWrapper {
      margin-top: 45px;
    }
  }
}