/* Isolated progressive enhancement for the public media strip. */
.media-carousel-addon-viewport {
  position: relative;
  clip-path: inset(-10px 0 -10px 0);
}

.hp-media-track.media-carousel-addon-static,
.hp-media-track.media-carousel-addon-manual {
  animation: none !important;
  transform: none !important;
}

.hp-media-track.media-carousel-addon-static .hp-media-clones {
  display: none !important;
}

.hp-media-track.media-carousel-addon-auto {
  width: max-content !important;
  min-width: 100% !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
  animation: home-media-carousel-addon-loop var(--home-media-carousel-addon-duration, 32s) linear infinite !important;
  will-change: transform;
}

.hp-media-track.media-carousel-addon-auto .hp-media-link,
.hp-media-track.media-carousel-addon-auto .hp-media-clone {
  flex: 0 0 var(--home-media-carousel-addon-card-width) !important;
}

.hp-media-track.media-carousel-addon-auto .hp-media-clones {
  display: contents !important;
}

.hp-media-track.media-carousel-addon-manual {
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
}

.hp-media-track.media-carousel-addon-manual .hp-media-clones {
  display: contents !important;
}

.hp-media-track.media-carousel-addon-manual::-webkit-scrollbar {
  display: none;
}

@keyframes home-media-carousel-addon-loop {
  from {
    transform: translate3d(var(--home-media-carousel-addon-offset, 0px), 0, 0);
  }
  to {
    transform: translate3d(
      calc(var(--home-media-carousel-addon-offset, 0px) - var(--home-media-carousel-addon-distance)),
      0,
      0
    );
  }
}

@media (max-width: 767px) {
  .media-carousel-addon-viewport {
    clip-path: inset(-8px 0 -8px 0);
  }

  .hp-media-track.media-carousel-addon-auto .hp-media-link,
  .hp-media-track.media-carousel-addon-auto .hp-media-clone {
    box-sizing: border-box;
    width: clamp(156px, 56vw, 210px) !important;
    min-width: clamp(156px, 56vw, 210px) !important;
    flex-basis: clamp(156px, 56vw, 210px) !important;
  }

  .hp-media-track.media-carousel-addon-manual .hp-media-link,
  .hp-media-track.media-carousel-addon-manual .hp-media-clone {
    box-sizing: border-box;
    width: clamp(156px, 56vw, 210px) !important;
    min-width: clamp(156px, 56vw, 210px) !important;
    flex: 0 0 clamp(156px, 56vw, 210px) !important;
  }

  .hp-media-track.media-carousel-addon-static {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .hp-media-track.media-carousel-addon-static::-webkit-scrollbar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-media-track.media-carousel-addon-auto {
    animation: none !important;
    transform: none !important;
  }

  .hp-media-track.media-carousel-addon-auto .hp-media-clones {
    display: none !important;
  }
}