/**
 * UI Initiative triple Slider
 *
 * Parallax & scale effects slider
 *
 * https://uiinitiative.com
 *
 * Copyright 2025 UI Initiative
 *
 * Released under the UI Initiative Regular License
 *
 * June 27, 2025
 */
:root {
  --triple-image-border-radius: 16px;
  --triple-slider-height: clamp(400px, 50vw, 700px);
}

.swiper-triple {
  box-sizing: border-box;
}

.swiper-triple.swiper-horizontal {
  padding-top: var(--triple-padding, 0px);
  padding-bottom: var(--triple-padding, 0px);
}

.swiper-triple.swiper-vertical {
  padding-right: var(--triple-padding, 0px);
  padding-left: var(--triple-padding, 0px);
}

.swiper-triple .triple-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  overflow: hidden;
  border-radius: var(--triple-image-border-radius, 0px);
}

.swiper-triple .triple-content {
  position: relative;
  height: 100%;
}

.swiper-triple .triple-image {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  position: absolute;
  object-fit: cover;
}

.swiper-triple.swiper-horizontal .triple-image {
  right: calc((var(--triple-image-offset) * 100% - 100%) / -2);
  top: 0;
  width: calc(var(--triple-image-offset) * 100%);
  height: 100%;
}

.swiper-triple.swiper-vertical .triple-image {
  top: calc((var(--triple-image-offset) * 100% - 100%) / -2);
  right: 0;
  height: calc(var(--triple-image-offset) * 100%);
  width: 100%;
}

.wows-triple {
  height: var(--triple-slider-height);
  min-height: var(--triple-slider-height);
}

.wows-triple .swiper {
  max-width: 100%;
}

.wows-triple .swiper-horizontal {
  width: 100%;
  height: 100%;
  margin: auto 0;
}

.wows-triple .swiper-vertical {
  height: 100%;
  width: 100%;
}

.wows-triple .triple-content {
  padding: clamp(16px, 2.5vw, 40px);
  display: flex;
  align-items: end;
  box-sizing: border-box;
}
.wows-triple .triple-content .wows-triple-title {
  font-weight: bold;
  font-size: clamp(24px, 3vw, 48px);
  line-height: 1.1;
  text-wrap-style: balance;
  color: #2b2c2f;
  padding: 0;
  margin: 0;
}

.wows-triple .triple-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}