.image-caraousel__image {
  position: relative
}
.image-caraousel .caption__title {
  color: var(--base-1)
}
.image-caraousel .caption__content {
  color: var(--base-1)
}
.image-caraousel .caption .cta {
  color: var(--base-1)
}
.image-caraousel .swiper-main {
  position: relative;
  min-height: 30rem
}
.image-caraousel .swiper-main .carousel-pagination {
  position: absolute;
  right: 0;
  z-index: 5
}
.image-caraousel .swiper-main .carousel-arrow__counter {
  display: none!important
}
.image-caraousel .swiper-main .swiper-slide {
  opacity: 0!important
}
.image-caraousel .swiper-main .swiper-slide.swiper-slide-active {
  opacity: 1!important
}
.image-caraousel .swiper-thumbslide {
  cursor: pointer
}
.image-caraousel__thumb-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1.3/1
}
.image-caraousel .swiper-thumbnail .carousel-pagination {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 4;
  width: 100%;
  left: 0;
  pointer-events: none
}
.image-caraousel .swiper-thumbnail .carousel-pagination__buttons {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  pointer-events: none
}
.image-caraousel .swiper-thumbnail .carousel-pagination__buttons .arrow-button {
  pointer-events: all
}
.image-caraousel .swiper-thumbnail.image-caraousel__thumb-title .swiper-thumbslide::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  top: 0;
  left: 0;
  z-index: 2
}
.image-caraousel .swiper-thumbnail.image-caraousel__thumb-title .swiper-thumbslide.swiper-slide-thumb-active::before {
  background: rgba(0,0,0,.25)
}
.image-caraousel .swiper-thumb {
  margin: 0 2.4rem
}
.image-caraousel .swiper-thumbslide.swiper-slide-thumb-active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 4px solid;
  z-index: 3
}
.image-caraousel.section-dark .swiper-thumbslide.swiper-slide-thumb-active::after {
  border-color: var(--base-5)
}
.image-caraousel.section-light .swiper-thumbslide.swiper-slide-thumb-active::after {
  border-color: var(--base-1)
}
.image-caraousel__image-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 2
}
@media (min-width:768px) {
  .image-caraousel .caption {
    padding-left: var(--sm-1);
    padding-right: var(--sm-1)
  }
  .image-caraousel .caption__title {
    color: var(--base-5)
  }
  .image-caraousel .caption__content {
    color: var(--base-5)
  }
  .image-caraousel .caption .cta {
    color: var(--base-5)
  }
  .image-caraousel__intro-text {
    z-index: 1
  }
  .image-caraousel__intro-text::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 0;
    background: var(--gradient-bottom-dark)
  }
  .image-caraousel__image {
    position: absolute;
    height: 100%
  }
  .image-caraousel__thumb-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1.42/1
  }
  .image-caraousel .swiper-main {
    min-height: 50rem
  }
  .image-caraousel .swiper-main .carousel-arrow__counter {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important
  }
  .image-caraousel .swiper-thumbnail__thumb-image {
    width: 18.6rem
  }
}
@media (min-width:992px) {
  .image-caraousel .swiper-main {
    min-height: 70rem
  }
  .image-caraousel__thumb-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1.38/1
  }
  .image-caraousel .swiper-thumbslide.swiper-slide-thumb-active::after {
    border: 8px solid
  }
}
@media (max-width:767.98px) {
  .image-caraousel.section-dark .swiper-thumbslide.swiper-slide-thumb-active::after {
    border-color: var(--base-5)
  }
  .image-caraousel.section-dark .caption__title {
    color: var(--base-5)
  }
  .image-caraousel.section-dark .caption__content {
    color: var(--base-5)
  }
  .image-caraousel.section-dark .caption .cta {
    color: var(--base-5)
  }
  .image-caraousel.section-light .swiper-thumbslide.swiper-slide-thumb-active::after {
    border-color: var(--base-1)
  }
  .image-caraousel.section-light .caption__title {
    color: var(--base-1)
  }
  .image-caraousel.section-light .caption__content {
    color: var(--base-1)
  }
  .image-caraousel.section-light .caption .cta {
    color: var(--base-1)
  }
}