:root {
  --slider_images_heiight: 18rem;
  --scroller_gap: 2rem;
}
/* home page  */
.object-position-left {
  object-position: left;
}
/* hero section  */
.hero-component--right-column {
  max-width: 32rem;
}
.hero-absolute-image-1 {
  bottom: -15px;
}
.hero-absolute-image-2 {
  bottom: -48px;
  right: -29px;
}
.hero-slider-track .slides,
.hero-slider_wrapper {
  height: var(--slider_images_heiight);
}
.hero-slider-track {
  display: flex;
  flex-direction: column;
  animation: slideUp 10s cubic-bezier(1, 0, 0, 1) infinite;
  transform: translateY(0);
}
/* scroller */
.scroller__inner {
  gap: var(--scroller_gap);
  width: max-content;
  animation: scrollX var(--_animation-duration, 45s)
    var(--_animation-direction, forwards) linear infinite;
}
.scroller__inner .col {
  max-width: 320px;
}
.scroller{
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}
.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}


@media screen and (max-width: 575.98px) {
  .hero-absolute-image-2 {
    width: 80px;
    bottom: -58px;
    right: -7px;
  }
}
@media screen and (max-width: 450.98px) {
  .scroller__inner .col {
    max-width: 250px;
  }  
  :root{
    --slider_images_heiight: 13.5rem;
    --scroller_gap: 1rem;
  }
}
@keyframes scrollX {
  to {
    transform: translate(calc(-50% - var(--scroller_gap) / 2));
  }
}
@keyframes slideUp {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(calc(var(--slider_images_heiight) * -1));
  }
  40% {
    transform: translateY(calc(var(--slider_images_heiight) * -2));
  }
  60% {
    transform: translateY(calc(var(--slider_images_heiight) * -3));
  }
  80% {
    transform: translateY(calc(var(--slider_images_heiight) * -4));
  }
  100% {
    transform: translateY(calc(var(--slider_images_heiight) * -5));
  }
}