.slide {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: clip;
  z-index: 1;
}

.slide img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: crossfade 16s infinite; /* Total duration: 4s per slide * 4 slides */
}

/* Staggered delays: (Slide Number - 1) * (Total Duration / Number of Slides) */
.slide img:nth-child(1) { animation-delay: 0s; }
.slide img:nth-child(2) { animation-delay: 4s; }
.slide img:nth-child(3) { animation-delay: 8s; }
.slide img:nth-child(4) { animation-delay: 12s; }
.slide img:nth-child(5) { animation-delay: 16s; }

@keyframes crossfade {
  0%   { opacity: 0; }
  5%   { opacity: 1; } /* Fade in quickly */
  25%  { opacity: 1; } /* Stay visible for 20% of the total time */
  30%  { opacity: 0; } /* Fade out */
  100% { opacity: 0; } /* Stay hidden until loop restarts */
}