/* === Slider ================================================= */

.slider {
  --slider-gap: 2.4rem;
  --slider-seam-offset: 0.8rem;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: 3;
  padding: 2.4rem 0;
  background-color: transparent;
}

/* === Track ================================================== */

.slider-track {
  display: flex;
  align-items: center;
  gap: var(--slider-gap);
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  animation: slider-scroll 75s linear infinite;
}

@keyframes slider-scroll {
  to {
    transform: translateX(
      calc(
        -1 * var(--slider-loop-distance, calc(50% + var(--slider-seam-offset)))
      )
    );
  }
}

/* === Slide item ============================================= */

.slide-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 2.4rem 0.6rem 2.4rem;
  background-color: var(--color-white);
  border-radius: 100rem;
  box-shadow: 0 0 1.2rem 0 var(--color-shadow);
}

.slide-rating-box {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.slide-star {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
}

.slide-name {
  font-family: var(--font-text);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-dark-grey);
}

/* === Gallery Sliders ========================================= */

.gallery-slider-wrapper {
  overflow: hidden;
  width: 100%;
  margin-bottom: 2.4rem;
}

.gallery-slider-wrapper:last-child {
  margin-bottom: 0;
}

.gallery-slider {
  --gallery-slider-max-width: 140rem;
  --gallery-slider-fade-width: 0;
  --gallery-slider-fade-color: var(--color-brown);
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.gallery-slider::before,
.gallery-slider::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--gallery-slider-fade-width);
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

@media (min-width: 768px) {
  .gallery-slider {
    --gallery-slider-fade-width: 8rem;
  }
}

@media (min-width: 1139px) {
  .gallery-slider {
    max-width: var(--gallery-slider-max-width);
    margin-left: auto;
    margin-right: auto;
    --gallery-slider-fade-width: 14rem;
  }
}

@media (min-width: 768px) {
  .gallery-slider::before,
  .gallery-slider::after {
    display: block;
  }

  .gallery-slider::before {
    left: 0;
    background: linear-gradient(
      to right,
      var(--gallery-slider-fade-color),
      transparent
    );
  }

  .gallery-slider::after {
    right: 0;
    background: linear-gradient(
      to left,
      var(--gallery-slider-fade-color),
      transparent
    );
  }
}

.gallery-slider-track {
  display: flex;
  gap: 2.4rem;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  animation-name: scroll-rtl;
  animation-duration: 90s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@media (max-width: 1279px) {
  .gallery-slider-track {
    animation-duration: 60s;
  }
}

.gallery-slider-ltr .gallery-slider-track {
  animation-name: scroll-ltr;
  animation-direction: reverse;
}

/* Stagger animation starts for visual variety */
.gallery-slider-wrapper:nth-child(1) .gallery-slider-track {
  animation-delay: 0s;
}

.gallery-slider-wrapper:nth-child(2) .gallery-slider-track {
  animation-delay: 0s;
}

.gallery-slider-wrapper:nth-child(3) .gallery-slider-track {
  animation-delay: -45s;
}

.gallery-slider-wrapper:nth-child(4) .gallery-slider-track {
  animation-delay: -45s;
}

@media (min-width: 1280px) {
  .gallery-slider-wrapper:nth-child(1) .gallery-slider-track {
    animation-delay: 0s;
  }

  .gallery-slider-wrapper:nth-child(2) .gallery-slider-track {
    animation-delay: 0s;
  }

  .gallery-slider-wrapper:nth-child(3) .gallery-slider-track {
    animation-delay: -30s;
  }

  .gallery-slider-wrapper:nth-child(4) .gallery-slider-track {
    animation-delay: -30s;
  }
}

@keyframes scroll-rtl {
  to {
    transform: translate3d(calc(-50% - 1.2rem), 0, 0);
  }
}

@keyframes scroll-ltr {
  to {
    transform: translate3d(calc(-50% - 1.2rem), 0, 0);
  }
}

.gallery-image {
  width: 33.6rem;
  height: 18.6rem;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border-radius: 2.4rem;
}