.carousel-container {
  width: 100%;
  max-width: 600px;
  /* margin: 50px auto; */
  overflow: hidden;
  position: relative;
}

.carousel {
  display: flex;
  width: 100%;
  animation: slide 10s infinite;
}

.carousel img {
  width: 100%;
  flex-shrink: 0;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  14% {
    transform: translateX(0);
  }
  19% {
    transform: translateX(-100%);
  }
  28% {
    transform: translateX(-100%);
  }
  33% {
    transform: translateX(-200%);
  }
  42% {
    transform: translateX(-200%);
  }
  47% {
    transform: translateX(-300%);
  }
  56% {
    transform: translateX(-300%);
  }
  61% {
    transform: translateX(-400%);
  }
  70% {
    transform: translateX(-400%);
  }
  75% {
    transform: translateX(-500%);
  }
  84% {
    transform: translateX(-500%);
  }
  100% {
    transform: translateX(0);
  }
}