.illu-container {
	margin-block: min(5rem, 30vmin);
}

.illu {
	margin-bottom: 16px;
}

.illu-frames {
	overflow-x: clip;
	max-width: 100%;
	display: grid;
	justify-content: center;
}

.illu-frames > * {
	grid-area: 1 / 1;
}

@keyframes anim20frames {
	0% { opacity: 1; }
	5% { opacity: 1; }
	5.01% { opacity: 0; }
	100% { opacity: 0; }
}

.illu-frames pre {
	background: none;
	box-shadow: none;
	line-height: normal;
	width: 53ch;
	animation: anim20frames 10s steps(1) infinite ;
	opacity: 0;
}

.illu-frames pre:nth-child(1) { animation-delay: 0ms; }
.illu-frames pre:nth-child(2) { animation-delay: 500ms; }
.illu-frames pre:nth-child(3) { animation-delay: 1000ms; }
.illu-frames pre:nth-child(4) { animation-delay: 1500ms; }
.illu-frames pre:nth-child(5) { animation-delay: 2000ms; }
.illu-frames pre:nth-child(6) { animation-delay: 2500ms; }
.illu-frames pre:nth-child(7) { animation-delay: 3000ms; }
.illu-frames pre:nth-child(8) { animation-delay: 3500ms; }
.illu-frames pre:nth-child(9) { animation-delay: 4000ms; }
.illu-frames pre:nth-child(10) { animation-delay: 4500ms; }
.illu-frames pre:nth-child(11) { animation-delay: 5000ms; }
.illu-frames pre:nth-child(12) { animation-delay: 5500ms; }
.illu-frames pre:nth-child(13) { animation-delay: 6000ms; }
.illu-frames pre:nth-child(14) { animation-delay: 6500ms; }
.illu-frames pre:nth-child(15) { animation-delay: 7000ms; }
.illu-frames pre:nth-child(16) { animation-delay: 7500ms; }
.illu-frames pre:nth-child(17) { animation-delay: 8000ms; }
.illu-frames pre:nth-child(18) { animation-delay: 8500ms; }
.illu-frames pre:nth-child(19) { animation-delay: 9000ms; }
.illu-frames pre:nth-child(20) { animation-delay: 9500ms; }

@media (prefers-reduced-motion: reduce) {
	.illu-frames pre:nth-child(n) {
		animation: none;
	}
	.illu-frames pre:nth-child(16) {
		opacity: 1;
	}
}