starter.css

*,
*::before,
*::after {
	box-sizing: border-box;
	position: relative;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	font-family: inherit;
	color: inherit;
	transition: 0.5s cubic-bezier(0.3, -0.1, 0.1, 1.1);
}

body {
	font-family: sans-serif;
	padding: 10vmin;
	line-height: 1.5;
}

button {
	cursor: pointer;
}

.carousel__wrapper {
	padding: 3em 0;
}

.carousel {
	display: flex;
	color: white;
	font-weight: bold;
}

.slide,
.coarse-dot-navigation button {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	background: #ff3939;
	border-radius: 1em;
	transform: scale(0.85);
	opacity: 0.37;
}

.coarse-dot-navigation {
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.coarse-dot-navigation button {
	width: 2em;
	height: 2em;
}

.slide {
	width: 20em;
	height: 15em;
}

.slide.selected,
.coarse-dot-navigation button.selected {
	transform: scale(1);
	opacity: 1;
}

.coarse-controls {
	width: 3.3em;
	height: 3.3em;
	position: absolute;
	top: 50%;
	border-radius: 50%;
	transform: translateY(-50%);
	opacity: 0.63;
	background-color: #334466;
	background-size: 80%;
	background-position: center;
	background-repeat: no-repeat;
}

.coarse-controls:hover,
.coarse-controls:focus {
	opacity: 1;
	box-shadow: 0 0 1em rgba(0, 0, 0, 0.37);
}

.coarse-controls.previous {
	background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 216 216'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:white;stroke-linejoin:round;stroke-width:20px;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M137.64,180l-72-72,72-72'/%3E%3C/svg%3E");
}

.coarse-controls.next {
	right: 0;
	background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 216 216'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:white;stroke-linejoin:round;stroke-width:20px;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M78.36,36l72,72-72,72'/%3E%3C/svg%3E");
}