* { box-sizing: border-box; margin: 0; padding: 0; }

html {
	font: 100%/1.4 system-ui, sans-serif;
	background: #ddd;
}

ul { list-style: none; }

.container {
	margin-inline: auto;
	margin-block: 100px 300px;
	padding: 1rem;
	width: min(95%, 30rem);
	background: white;
}

.slideshow {
	--timeout: 5000ms;
}

.slideshow ul {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	border: 1px solid #ddd;
}

.slideshow ul li {
	opacity: 0;
	grid-row-start: 1;
	grid-column-start: 1;
	z-index: 0;

	/* for demo purposes  */
	min-height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slideshow ul li.active {
	opacity: 1;
	z-index: 1;
}

.slideshow nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-block-start: 2rem;
}

.slideshow nav .buttons {
	flex: 0;
	flex-basis: 1rem;
}

.slideshow nav .dots {
	flex: 1;
	width: calc(100% - 4rem);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

.slideshow nav progress {
	flex: 0;
	flex-basis: 1rem;
	-webkit-appearance: none;
	cursor: pointer;
	transition: all 0.5s;
}

.slideshow:not(.paused) nav progress.active {
	flex-basis: 4rem;
}

.slideshow nav progress::-webkit-progress-bar {
	border-radius: 0.5rem;
	background: #bbb;
	transition: background 0.5s ease;
}

.slideshow nav progress::-webkit-progress-value,
.slideshow.paused nav progress.active::-webkit-progress-value {
	border-radius: 0.5rem;
	background: transparent;
	transition: width var(--timeout) linear;
}

.slideshow nav progress.active::-webkit-progress-value,
.slideshow.paused nav progress.active::-webkit-progress-bar {
	background: #222;
}

.slideshow nav progress:hover::-webkit-progress-bar,
.slideshow.paused nav progress:hover::-webkit-progress-bar,
.slideshow nav button:hover {
	background: #777;
}

.slideshow nav button {
	border: 0;
	font-size: 100%;
	width: 1rem;
	height: 1rem;
	border-radius: 0.5rem;
	background: #bbb;
	text-indent: -9000px;
}

.slideshow nav button:active {
	background: #222;
}