*,
*::before,
*::after {
  box-sizing: border-box;
}

.slideshow-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Important for the slide effect */
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.8s ease-in-out;
  transform: translateX(100%); /* Start all slides off-screen to the right */
}

.slide.active {
  transform: translateX(0); /* The active slide is on-screen */
}

.slide.prev {
  transform: translateX(-100%); /* The previous slide is off-screen to the left */
}

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