/* === Google Fonts (Optional) === */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;700&display=swap');

/* === Reset Scrollbar for clean look === */
::-webkit-scrollbar {
  display: none;
}

/* === Holder for infinite scroll === */
.scroll-holder {
  overflow: hidden;
  width: 100%;
}

/* === Tray that scrolls === */
.scroll-tray {
  display: flex;
  width: max-content;
  animation: scroll-left 70s linear infinite;
}

/* === Each image container === */
.scroll-tray div {
  flex: 0 0 auto;
  width: 230px;
  margin-right: 1rem;
}

/* === The images themselves === */
.scroll-tray img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.scroll-tray img:hover {
  transform: scale(1.05);
}

/* === Keyframes for smooth infinite scroll === */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* === Responsive Tweaks === */
@media (max-width: 600px) {
  .scroll-tray div {
    width: 160px;
  }

  .scroll-tray img {
    height: 200px;
  }
}