.carousel {
  --carousel-buttons-indent: var(--horizontal-padding-sm);
  --carousel-container-padding: 60px 0 var(--carousel-navigation-indent, 0);
  --carousel-dot-opacity: 0.3;
  --carousel-dot-size: 16px;
  --carousel-dots-bottom: 0;
  --carousel-dots-left: 0;
  --carousel-dots-max-width: 100vw;
  --carousel-dots-padding-y: var(--carousel-navigation-padding-y);
  --carousel-dots-position: static;
  --carousel-dots-transform: none;
  --carousel-dots-width: auto;
  --carousel-image-shadow: none;
  --carousel-image-transform: scale(1);
  --carousel-image-transition: none;
  --carousel-navigation-button-height: 56px;
  --carousel-navigation-button-width: 56px;
  --carousel-navigation-left: 50%;
  --carousel-navigation-max-width: 50vw;
  --carousel-navigation-padding-y: 0px;
  --carousel-navigation-position: relative;
  --carousel-slide-margin: 0;
  --carousel-slide-padding: 0;
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translate(-50%);
  align-self: flex-start;
}
@media (min-width: 992px) {
  .carousel {
    --carousel-container-padding: 80px 0 var(--carousel-navigation-indent, 0);
    --carousel-image-shadow: 12px 10px 29px 0 color-mix(in srgb, var(--color-primary) 15%, transparent);
    --carousel-slide-margin: 0 16px;
    --carousel-slide-padding: 30px 0;
  }
}
@media (min-width: 1440px) {
  .carousel {
    --carousel-buttons-indent: var(--horizontal-padding-lg);
  }
}
@media (min-width: 1920px) {
  .carousel {
    --carousel-dots-left: 50%;
    --carousel-dots-transform: translate(-100%, 0);
    --carousel-dots-width: 100%;
    --carousel-navigation-max-width: calc(var(--max-width) / 2);
  }
}
@media (max-width: 479px) {
  .carousel {
    --carousel-navigation-padding-y: 16px;
  }
}
.carousel:has(.carousel__dots) {
  --carousel-navigation-indent: 32px;
}
@media (min-width: 1920px) {
  .carousel:has(.carousel__dots) {
    --carousel-container-padding: 80px 0 calc(var(--carousel-navigation-indent, 0px) + var(--carousel-dot-size));
    --carousel-dots-position: absolute;
  }
}
.carousel:has(.carousel__navigation) {
  --carousel-dots-bottom: calc(var(--carousel-navigation-button-height) / 2 + var(--carousel-navigation-padding-y, 0px));
  --carousel-dots-max-width: 50vw;
  --carousel-dots-padding-y: 0;
  --carousel-dots-position: absolute;
  --carousel-dots-transform: translateY(50%);
  --carousel-navigation-indent: 32px;
}
@media (min-width: 1920px) {
  .carousel:has(.carousel__navigation) {
    --carousel-container-padding: 80px 0 var(--carousel-navigation-indent, 0);
    --carousel-dots-max-width: calc(var(--max-width) / 2);
    --carousel-dots-transform: translate(-100%, 50%);
  }
}
.carousel__container {
  overflow: clip;
  width: 100%;
  padding: var(--carousel-container-padding);
}
.carousel__list {
  display: flex;
  backface-visibility: hidden;
  touch-action: pan-y pinch-zoom;
}
.carousel__slide {
  flex: 0 0 var(--carousel-slide-width);
  max-width: var(--carousel-slide-width);
  margin: var(--carousel-slide-margin);
}
.carousel__slide img {
  transition: var(--carousel-image-transition);
  transform: var(--carousel-image-transform);
}
.initialized .carousel__slide {
  --carousel-image-transition: transform var(--transition-duration) var(--transition-function);
}
.carousel__slide.active {
  z-index: 1;
}
@media (min-width: 992px) {
  .carousel__slide.active {
    --carousel-image-transform: scale(1.2);
    --carousel-slide-padding: 0;
  }
}
.carousel__slide.active img {
  box-shadow: var(--carousel-image-shadow);
}
.carousel__navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: var(--carousel-navigation-padding-y) var(--carousel-buttons-indent);
  max-width: var(--carousel-navigation-max-width);
  position: var(--carousel-navigation-position);
  left: var(--carousel-navigation-left);
}
.carousel__btn {
  --button-arrow-animation: none;
  --button-arrow-indent: 0;
  --button-indent: 0;
  --button-height: var(--carousel-navigation-button-height);
  --button-width: var(--carousel-navigation-button-width);
}
.carousel__prev {
  --button-arrow-indent: 0 2px 0 0;
  --button-arrow-transform: rotate(180deg);
}
.carousel__next {
  --button-arrow-indent: 0 0 0 2px;
}
.carousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: var(--carousel-dots-max-width);
  padding: var(--carousel-dots-padding-y) 0 var(--carousel-dots-padding-y) var(--carousel-buttons-indent);
  position: var(--carousel-dots-position);
  bottom: var(--carousel-dots-bottom);
  left: var(--carousel-dots-left);
  transform: var(--carousel-dots-transform);
  width: var(--carousel-dots-width);
}
.carousel__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--carousel-dot-size);
  height: var(--carousel-dot-size);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-function);
}
.carousel__dot::after {
  content: "";
  width: calc(var(--carousel-dot-size) / 2);
  height: calc(var(--carousel-dot-size) / 2);
  border-radius: 50%;
  pointer-events: none;
  background: var(--color-primary, #000);
  opacity: var(--carousel-dot-opacity);
  transition: all var(--transition-duration) var(--transition-function);
}
.carousel__dot:hover::after {
  --carousel-dot-opacity: 1;
}
.carousel__dot.active::after {
  --carousel-dot-opacity: 1;
}