:host {
  display: block;
  width: 100%;
}

.continuous-carousel {
  --gap: 1rem;
  --card-width: calc((100vw - 4 * var(--gap)) / 5);

  width: 100%;
  overflow: hidden;
}

.continuous-carousel__track {
  display: flex;
  width: max-content;
  margin-left: var(--carousel-offset, 0px);
  animation: continuous-carousel-scroll var(--duration) linear infinite;
}

.continuous-carousel__set {
  display: flex;
  flex: none;
  gap: var(--carousel-gap, var(--gap));
  padding-right: var(--carousel-gap, var(--gap));
}

.continuous-carousel__image {
  display: block;
  flex: none;
  width: var(--carousel-card-width, var(--card-width));
  aspect-ratio: 1.45;
  object-fit: cover;
  border-radius: 2px;
  background: #e5e5e5;
}

.continuous-carousel:hover .continuous-carousel__track,
.continuous-carousel:focus-within .continuous-carousel__track {
  animation-play-state: paused;
}

@keyframes continuous-carousel-scroll {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 767px) {
  .continuous-carousel {
    --gap: 0.75rem;
    --card-width: calc((100vw - 2 * var(--gap)) / 3);
  }
}

@media (max-width: 480px) {
  .continuous-carousel {
    --card-width: calc((100vw - var(--gap)) / 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .continuous-carousel {
    overflow-x: auto;
  }
  .continuous-carousel__track {
    animation: none;
    margin-left: 0;
  }
  .continuous-carousel__set[aria-hidden='true'] {
    display: none;
  }
}