/* HOIHOI 14.1: retain an accessible 44px target while restoring the slim bar indicator. */
.hero-dots {
	gap: 0;
}

.hero-dot,
.hero-dot.is-active {
	position: relative;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	background: transparent;
}

.hero-dot.is-active {
	width: 56px;
}

.hero-dot::before {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, .45);
	transition: left .25s ease, right .25s ease, background-color .25s ease;
}

.hero-dot.is-active::before {
	left: 4px;
	right: 4px;
	background: #fff;
}

.hero-dot:hover::before,
.hero-dot:focus-visible::before {
	background: rgba(255, 255, 255, .9);
}