.banner-carousel-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1px;
  width: 100%; 
  height: 100%;
  pointer-events: none;
  z-index: var(--z-index-z-dropdown);
}
.content-allignment-right .banner-carousel-img::before {
  background: linear-gradient(90deg, rgba(1, 4, 20, 0) 70%, #010414 100%);
}
.content-allignment-left .banner-carousel-img::before {
  background: linear-gradient(270deg, rgba(1, 4, 20, 0) 70%, #010414 100%);
}
.banner-carousel-text {   
  width: 38%;
  display: flex;
  align-items: center;
  padding: var(--space-space-lg) var(--space-space-xl) var(--space-space-lg);
  background: var(--color-surface-surface-inverse-neutral);
  border-top-right-radius: var(--border-radius-border-border-radius-md);
  border-bottom-right-radius: var(--border-radius-border-border-radius-md);
}
.content-allignment-left .banner-carousel-text {
  border-top-left-radius: var(--border-radius-border-border-radius-md);
  border-bottom-left-radius: var(--border-radius-border-border-radius-md);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.banner-carousel-text h2 {
  color: var(--color-foreground-foreground-on-active);
}
.banner-carousel-text .tag {
  margin-bottom: var(--space-space-sm);
}
.banner-carousel-text .description p {
  padding-bottom: 0;
  margin-bottom: 0;
  color: var(--color-foreground-foreground-on-active);
}
.banner-carousel-item {
  display: flex;
  min-height: 374px;
}
.banner-carousel-img {
  width: 62%;
  position: relative;
}
.banner-carousel-img .md-show,
.banner-carousel-img .sm-show {
  height: 100%;
}
.banner-carousel-img img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.banner-carousel-img .md-show img {
  border-radius: var(--border-radius-border-border-radius-md);
}
.content-allignment-left {
  flex-direction: row-reverse;
}
.banner-carousel-slider.swiper {
  padding-bottom: 30px;
}
.banner-carousel-slider .swiper-pagination.swiper-pagination-bullets {
  bottom: 0;
}
.banner-carousel-button {
  margin-top: var(--space-space-lg);
}
.content-allignment-left .banner-carousel-img::before {
  left: -1px;
}
.banner-carousel-slider.swiper .swiper-button {
  justify-content: space-between;
  top: 50%;
  left: 50%;
  bottom: auto;
  width: 100%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.banner-carousel-slider.swiper .swiper-button > div {
  opacity: 0.5;
  width: 40px;
  height: 40px;
}
@media only screen and (max-width: 960px) {
  .banner-carousel-item {
    flex-direction: column;
    background-color: var(--color-surface-surface-inverse-neutral);
    justify-content: space-between;
  }
  .banner-carousel-img {
    width: 100%;
    min-height: 203px;
  }
  .banner-carousel-img .sm-show,
  .banner-carousel-img img {
    min-height: 203px;
  }
  .banner-carousel-text {
    padding: var(--space-space-lg) var(--space-space-lg) 40px;  
    width: 100%;
    border-radius: 0;
  }
  .banner-carousel-img .md-show img {
    border-radius: 0;
  }
  .content-allignment-left .banner-carousel-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .banner-carousel-item .banner-carousel-img::before {
    background: linear-gradient(180deg, rgba(1, 4, 20, 0) 78%, #010414 100%);
    left: 0;
    top: 1px;
  } 
}