:root {
  /* set up slideshow */
  --images: 8; /* number of images */
  --slide: 1.5s; /* sliding time */
  --still: 4.5s; /* still time */
  --aspect: 16/5; /* image aspect ratio */
  
  /* do not alter */
  --total: calc(var(--slide) + var(--still));
  --frame: calc(var(--total) * var(--images));
 }

#outer {
 container: out / size;
 width:100%;
 max-width:100%;
 aspect-ratio:var(--aspect);
 margin:0px auto;
 overflow:hidden;
 border:0px solid #000;
}

#inner {
 container: update / size;
 height:100cqh;
 position:relative;
 animation:slide1a steps(var(--images)) var(--frame) infinite;
}

#slide {
 position:absolute;
 display:flex;
 flex-wrap:nowrap;
 height:100cqh;
 left:-100cqw;
 transition:var(--slide);
}

#slide img {
 display:inline-block;
 height:100cqh;
 padding:0;
 margin:0;
}

@keyframes slide1a {
 0% {width:0cqw;} 
 100% {width:calc(var(--images) * 100cqw);}
}

@media only screen and (max-width: 900px) {
    #outer {margin:-20px auto 0 auto;}
        }