/**
 * Carousel styles
 * Loaded on Amenities and Homepage templates only.
 */

.carousel {
  background-color: var(--background-colour);
  color: var(--text-colour);
  padding-top: calc(var(--padding-top) * 0.75);
  padding-bottom: calc(var(--padding-bottom) * 0.75);
}

.carousel__button-next {
  right: 36px;
}

.carousel__button-next,
.carousel__button-prev {
  position: absolute;
  top: 80%;
  transform: translateY(-50%);
  width: 14px;
  height: auto;
  cursor: pointer;
  z-index: 10;
}

.carousel__button-next svg,
.carousel__button-prev svg {
  display: block;
  width: 100%;
  height: auto;
  stroke: #e3e1db;
  fill: none;
}

.carousel__button-prev {
  left: 36px;
}

.carousel__container {
  position: relative;
}

.carousel__slide {
  transition: all 0.3s ease;
  padding: 0 15px;
  height: auto;
}

.carousel__slide.swiper-slide {
  transition-property: transform, opacity, padding;
}

.carousel__slide.swiper-slide-active {
  display: flex;
  height: auto;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.carousel__slide-card {
  height: auto;
  width: 100%;
  aspect-ratio: 16/10;
}

.carousel__slide-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel__slide-card-image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  mask-image: var(--mask-image);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.carousel__slide-card-image-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  z-index: 1;
}

.carousel__swiper {
  position: relative;
}

.carousel__swiper-wrapper {
  align-items: center;
}

@media (min-width: 768px) {
  .carousel {
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    padding-right: 65px;
    padding-left: 65px;
  }
  .carousel__button-next {
    right: -24px;
  }
  .carousel__button-next,
  .carousel__button-prev {
    top: 50%;
    width: 10px;
  }
  .carousel__button-next svg,
  .carousel__button-prev svg {
    stroke: currentColor;
  }
  .carousel__button-prev {
    left: -24px;
  }
  .carousel__slide {
    padding: 0px 30px;
    opacity: 0.8;
  }
  .carousel__slide.swiper-slide-active {
    padding: 0;
  }
}