#slideshow_container {
}

#slides {
  display: flex;
  overflow: hidden;
}

.slide {
  margin: 0 30px;
  animation: slide 20s linear infinite;
}

.slide img {
  width: 400px;
  height: 400px;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1840px);
  }
}

@media (max-width: 500px) {
  #slides {
    display: flex;
    overflow: hidden;
  }

  .slide {
    margin: 0 15px;
    animation: slide 20s linear infinite;
  }

  .slide img {
    width: 300px;
    height: 300px;
  }

  @keyframes slide {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-1320px);
    }
  }
}