.carousel {
  margin-top: 2%;
  /*margin: 0;*/
  /*background: #111;*/
  overflow-x: hidden;
}

.carousel-container {
  width: 100vw; /* на всю ширину вікна */
  overflow: hidden; /* приховуємо зайве */
}

.carousel-track {
  display: flex;
  width: max-content;
  animation: scroll 40s linear infinite; /* швидкість можна міняти */
}

.carousel-track a img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  margin-right: 15px;
  border-radius: 15px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.carousel-track a img:hover {
  transform: scale(1.08);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  } /* рівно на півтори довжини (бо є копія) */
}

/* картка у треку */
.carousel-item{
  position: relative;
  display: inline-block;      /* якщо трек побудований на inline/nowrap */
  overflow: hidden;
  border-radius: 12px;
}
.carousel-link{ display:block; position:relative; }
.carousel-item img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
}

/* підпис */
.carousel-caption{
  position:absolute; inset:auto 0 0 0;
  padding:10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  color:#fff;
}
.cap-title{
  margin:0 0 4px; font-size:clamp(.9rem, 1.2vw, 1rem); line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cap-desc{
  margin:0; font-size:clamp(.8rem, 1vw, .9rem); line-height:1.25; opacity:.95;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ховер-ефект для кращої читабельності */
.carousel-item:hover .carousel-caption{
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.05));
}