:root {
  --duration: 4s; /* 4 seconds per slide (matches inline style override too) */
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #111;
}

.slideshow {
  width: min(1000px, 95vw);
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;

  /* total time = number of slides * duration per slide */
  --slides: 5;
  --duration: 4s;
  --total: calc(var(--slides) * var(--duration));
}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;

  /* start hidden */
  opacity: 0;
  transform: scale(1.01);

  /* Fade in/out in a continuous loop */
  animation: slideShow var(--total) linear infinite;
  animation-delay: calc(var(--i) * var(--duration));
}

/* Each slide is visible only during its 4-second slot */
@keyframes slideShow {
  0%   { opacity: 0; transform: scale(1.01); }
  12.5%{ opacity: 1; transform: scale(1.00); } /* slightly early for smoothness */
  25%  { opacity: 1; transform: scale(1.00); }
  37.5%{ opacity: 0; transform: scale(1.01); }
  100% { opacity: 0; transform: scale(1.01); }
}