.live_matches {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.banner-track {
  display: flex;
  width: 100%;

  transition: transform 0.6s ease-in-out;
}

.banner-slide {
  min-width: 100%;
  width: 100%;
  flex-shrink: 0;
}

.banner-slide img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: cover;
}


/* =========================
   DOTS
========================= */

.carousel-dots {
  position: absolute;

  bottom: 8px;
  left: 50%;

  transform: translateX(-50%);

  display: flex;
  gap: 6px;

  z-index: 10;
}

.carousel-dots button {
  width: 8px;
  height: 8px;

  padding: 0;

  border: none;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.6);

  cursor: pointer;
}

.carousel-dots button.active {
  background: #ffffff;
  transform: scale(1.2);
}