/* -------------- Carousel container ----------- */
  .carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    user-select:none;               /* avoid accidental image selection */
    touch-action: pan-y;            /* allow horizontal swipes only */
  }

  /* -------------- Slides wrapper --------------- */
  .slides {
    display:flex;
    transition:transform .5s ease-in-out;
  }

  .slide {
    min-width:100%;
  }

  .slide .image-wrap  {
    /* height: 100dvh; */
  }

  .slide  .image-wrap img {
    width:100%;
    display:block;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
  }

  /* -------------- Navigation arrows ------------- */
  .nav {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:48rem;
    height:48rem;
    background:rgba(0,0,0,.5);
    border-radius:50%;
    color:#fff;
    font-size:24rem;
    line-height:48rem;
    text-align:center;
    cursor:pointer;
    z-index:10;
    user-select:none;
  }
  .nav:hover { background:rgba(0,0,0,.8); }
  .nav.prev { left:12rem; }
  .nav.next { right:12rem; }

  /* -------------- Pagination dots --------------- */
.dots {
	position: absolute;
	bottom: var(--30);
	left: var(--42);
	display: flex;
  justify-content: center;
	gap: 6rem;
	z-index: 10;
  width: 100%;
}
  .dot {
    width:12rem;
    height:12rem;
    border-radius:50%;
    cursor:pointer;
  }


  /* Custom */
  .module-carousel .carousel-wrap {
    padding: 0;
}
    .nav {
    display: none;
  }

    .slide .image-wrap  {
    /* height: 135rem; */
  }

.dot {
    background:transparent;
    border: 1rem solid var(--black);
  }


  .dot.active {
    background-color: var(--black);
}

.dots {
	position: absolute;
	bottom: -24rem;
	left: var(--24);
	display: flex;
	gap: 6rem;
	z-index: 10;
  width: 100%;
  align-content: center;
}

.carousel {
  overflow: hidden;
  user-select: none; /* Prevents text selection while dragging */
  touch-action: pan-y;  /*Allows vertical scroll, prevents horizontal browser swipe */
}

.slides {
  will-change: transform; /* Performance optimization */
}

/* banner */
.banner-carousel .dots {
	bottom: var(--30);
	left: var(--42);
  justify-content: left;
}

.banner-carousel .slide .image-wrap {
  height: 510rem;
}

.banner-carousel .slide .pure-u-lg-2-5::after {
	display: block;
	position: absolute;
	content: '';
	top: 20rem;
	left: 57rem;
	width: 40dvw;
	height: 100%;
	background-image: url('../images/banner-dots.svg');
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	z-index: 0;
}

.banner-carousel .slide .pure-u-lg-2-5 > .pl--42  > * {
  position: relative;
  z-index: 1;
}

@media (max-width:1023px) {
  .banner-carousel .pl--42.pr--24.pb--42 {
    padding: var(--24);
    padding-top: 0;
  }


.banner-carousel  .pure-u-lg-2-5 {
  height: 360rem;
}

.banner-carousel .slide .image-wrap {
  height: 240rem;
}

.banner-carousel h2 {
  font-size: 22rem;
}

.banner-carousel .slide {
  flex-direction: column-reverse;
}

div main.content .banner-carousel {
	padding-top: 0;
}

div main.content .banner-carousel .pure-u-1 {
	padding-top: 0;
	padding-bottom: 0;
}

div .banner-carousel .dots {
	bottom: var(--30);
	left: 0;
	justify-content: center;
}

.banner-carousel .slide .pure-u-lg-2-5::after {
	display: none;
}

}