/* ── Carousel container ───────────────────────── */
.wee-carousel {
  overflow: hidden;
  width: 100%;
  /* Optional: mask edges for a fade effect */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

/* ── The scrolling track ──────────────────────── */
.wee-carousel__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: wee-scroll 20s linear infinite; /* adjust speed here */
}

/* Pause on hover */
.wee-carousel:hover .wee-carousel__track {
  animation-play-state: paused;
}

/* ── Individual cards ─────────────────────────── */
.wee-carousel__item {
  flex-shrink: 0;
  width: 160px; /* adjust to your image size */
  border-radius: 12px;
  overflow: hidden;
}

.wee-carousel__item img {
  width: 160px;
  height: auto;       /* preserves original aspect ratio */
  object-fit: contain; /* shows full image, no cropping */
  display: block
}

/* ── The keyframe animation ───────────────────── */
@keyframes wee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* Move exactly half the track width — the width of one full set */
    transform: translateX(-50%);
  }
}