.teaser-box-content-wrapper {
  h2, h3, h4, h5, h6 {
    font-size: 22px!important;
  }
}

.teaser-box-wrapper {
  height: fit-content;
  position: relative;
  margin-block-end: 40px;

  &:hover {
    transition: var(--animation-300);

    .arrow-teaser {
      left: 45px;
    }
  }

  .arrow-teaser {
    transition: var(--animation-300);
    position: absolute;
    top: -25px;
    left: 35px;
  }

  .teaser-box-content-wrapper {
    height: 150px;
    background-color: white;
    padding: 20px;
    display: flex;
    align-items: flex-end;
    leading-trim: both;
    text-edge: cap;
    font-family: Barlow;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.22px;
    h2, h3, h4, h5, h6 {
      text-transform: none;
    }
  }
}

.lipidtech {
  .--bg-gradient {
    h2, h3, h4, h5, h6 {
      color: #fff;
    }
  }
  .teaser-box-content-wrapper {
    h2, h3, h4, h5, h6 {
      color: #000;
    }
  }
}

.hf_group {
  .teaser-box-wrapper {
    .arrow-teaser {
      path {
        fill: var(--hf-blue-400);
      }
    }
    .teaser-box-content-wrapper {
      color: #000;
      h2, h3, h4, h5, h6 {
        color: var(--hf-blue-600);
      }
    }
  }
}


/* overlay_image_carousel */
.overlay_image_carousel {
  height: 365px;
  background-color: black;
  overflow: hidden;
  position: relative;
  @media only screen and (min-width: 1200px) and (max-width: 1400px) {
    height: 260px;
  }
  .overlay {
    height: 100%;
    width: 100%;
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transition: ease-in-out all 0.3s;
    opacity: 1;

    &.gradient-blue {
      background: linear-gradient(106deg, #113870 30.87%, #009FE3 144.31%);
    }

    &.gradient-yellow {
      background: linear-gradient(106deg, #F9B008 30.87%, #FEE213 144.31%);
    }

    &.gradient-red {
      background: linear-gradient(106deg, #C9191E 30.87%, #DD826B 144.31%);
    }

    &:hover {
      opacity: 0;
      transition: ease-in-out all 0.3s;
    }
  }

  .overlay_image_carousel_bg {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .overlay_image_carousel_logo {
    position: absolute;
    padding: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center horizontally and vertically */
    z-index: 9999;
  }
}


.image_teaser_bottom {
  position: relative;
  height: 390px;
  overflow: hidden;
  &:hover {
    .hover-zoom img  {
      transition: all 0.3s linear;
      transform: scale(1.1);
    }
    p {
      transition: var(--animation-300);
      &::before {
        right: 0!important;
        left: 0!important;
        background-color: #fff!important;
      }
    }
  }
  .image_teaser_bottom_content_wrapper {
    position: absolute;
    bottom: 30px;
    left: 35px;
    color: #FFF;
    leading-trim: both;
    text-edge: cap;
    font-family: Barlow;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; /* 133.333% */
    z-index:2;
    p {
      position: relative;
      &::before {
        content: '';
        position: absolute;
        right: 50%;
        bottom: -.25rem;
        left: 50%;
        height: 2px;
        transition: all .3s ease-out 0s;
        background-color: transparent;
      }
    }
  }

  .image_teaser_bottom_bg_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .image_teaser_bottom_overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: linear-gradient(176deg, rgba(255, 255, 255, 0.00) 19.31%, rgba(17, 66, 112, 0.60) 56.91%, rgba(17, 66, 112, 0.90) 78.42%, #009FE3 113.33%);
  }
}