:root {
  --gap-width: 20px;
  --slide-width: 500px;
  --slide-height: 350px;
  --slide-bg-color: rgba(18, 92, 251, 0.52);
  --overlay-bg-color: rgba(0, 0, 0, 0.5);
  --overlay-text-color: #fff;
  --overlay-transition: opacity 0.5s ease;
  --border-radius: 0px;
}

.carousel {
  overflow: hidden;
  width: 100%;
  
}

.carousel-track {
  display: flex;
  gap: var(--gap-width);
  animation: scroll var(--scroll-duration) linear infinite;
  height: 100%;
  
}

.slide {
  background: var(--slide-bg-color);
  flex: 0 0 var(--slide-width);
  height: var(--slide-height);
  border-radius: var(--border-radius);
  position: relative;
  overflow: hidden;
  box-shadow: 5px 0px 10px silver;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  bottom: 0;
  background: var(--overlay-bg-color);
  color: var(--overlay-text-color);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: var(--overlay-transition);
  border-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide:hover .overlay {
  opacity: 1;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--total-width)));
  }
}

.carousel:hover .carousel-track {
  animation-play-state: paused;
}