.reel {
  overflow: hidden;
  width: 100%;
  position: relative;}
.reel-track {  
  display: flex;  gap: 16px;
  width: max-content; /* critical for proper scrolling */
  animation: reel-scroll 65s linear infinite;  will-change: transform;}

/* Images */
.reel-track img {
aspect-ratio: 3 / 4;
  width: 100%;
  object-fit: cover;  flex-shrink: 0;}
.reel-item {
    width: clamp(220px, 25vw, 320px);
  aspect-ratio: 3 / 4;
 
  flex: 0 0 auto;
  position: relative;
  overflow: hidden; /* ensures clean crop */}
.reel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 🔑 this does the cropping */
  object-position: center; /* control focal point */
}
/* Caption overlay */
.reel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;  padding: 12px 16px;  font-size: 14px;
  color: white;  background: linear-gradient(  to top,
    rgba(0,0,0,0.65),    rgba(0,0,0,0)  );  box-sizing: border-box;}

/* Animation */
@keyframes reel-scroll {
  from {
    transform: translateX(0);  }
  to {
    transform: translateX(-50%);  }
}

.reel:hover .reel-track {
  animation-play-state: paused;/* Optional: pause on hover */}