/* CMS-powered homepage hero cards. The motion mirrors the Webflow two-column
   marquee: each duplicated column moves one list-height, then loops seamlessly. */
[data-homepage-hero-templates] .hero-templates__col-wraper {
  --bt-hero-distance: 50%;
  --bt-hero-duration: 72s;
  will-change: transform;
  animation-duration: var(--bt-hero-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

[data-homepage-hero-templates] .home-hero__img img {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (min-width: 992px) {
  [data-homepage-hero-templates] [data-hero-column="1"] {
    animation-name: bt-home-hero-column-up;
  }

  [data-homepage-hero-templates] [data-hero-column="2"] {
    animation-name: bt-home-hero-column-down;
  }
}

@media screen and (max-width: 991px) {
  [data-homepage-hero-templates] .home-hero-images {
    overflow: hidden;
  }

  [data-homepage-hero-templates] [data-hero-column="1"] {
    animation-name: bt-home-hero-row-left;
  }

  [data-homepage-hero-templates] [data-hero-column="2"] {
    animation-name: bt-home-hero-row-right;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-homepage-hero-templates] .hero-templates__col-wraper {
    animation: none;
    transform: none;
  }
}

@keyframes bt-home-hero-column-up {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, calc(-1 * var(--bt-hero-distance)), 0);
  }
}

@keyframes bt-home-hero-column-down {
  from {
    transform: translate3d(0, calc(-1 * var(--bt-hero-distance)), 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bt-home-hero-row-left {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-1 * var(--bt-hero-distance)), 0, 0);
  }
}

@keyframes bt-home-hero-row-right {
  from {
    transform: translate3d(calc(-1 * var(--bt-hero-distance)), 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}