.teaser-box-wrapper {
  height: fit-content;
  position: relative;

  .arrow-teaser {
    position: absolute;
    top: -20px;
    left: 35px;
  }
  .teaser-box-content-wrapper {
    height: 150px;
    background-color: white;
    padding: 20px;
    display: flex;
    align-items: flex-end;

    color: #000;
    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;
  }
}


/* overlay_image_carousel */
.overlay_image_carousel {
  height: 365px;
  background-color: black;
  overflow: hidden;
  position: relative;

  .overlay {
    height: 100%;
    width: 100%;
    z-index: 99;
    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;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center horizontally and vertically */
    z-index: 9999;
  }
}


.image_teaser_bottom {
  position: relative;
  height: 390px;

  .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;
  }

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

    img {
      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%);
  }
}