.hvl-snap-dots {
	display: none;
}

@media (max-width: 767px) {
	.e-con.hvl-snap-rail,
	.hvl-snap-rail {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--hvl-snap-padding, 16px);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		touch-action: pan-x pan-y;
	}

	.hvl-snap-rail::-webkit-scrollbar {
		display: none;
	}

	.hvl-snap-rail > * {
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.hvl-snap-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 7px;
		margin-top: 4px;
		min-height: 18px;
	}

	.hvl-snap-dots .hvl-snap-dots__dot {
		width: 7px;
		height: 7px;
		min-height: 0;
		padding: 0;
		border: 0;
		border-radius: 99px;
		box-shadow: none;
		background: rgba(20, 22, 29, 0.18);
		transition: width 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.28s ease;
	}

	.hvl-snap-dots .hvl-snap-dots__dot:hover,
	.hvl-snap-dots .hvl-snap-dots__dot:focus {
		box-shadow: none;
		background: rgba(20, 22, 29, 0.28);
	}

	.hvl-snap-dots .hvl-snap-dots__dot.is-on {
		width: 18px;
		background: var(--e-global-color-primary, #08739f);
	}

	.hvl-snap-dots .hvl-snap-dots__dot:focus-visible {
		outline: 2px solid var(--e-global-color-primary, #08739f);
		outline-offset: 3px;
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.hvl-snap-dots .hvl-snap-dots__dot {
		transition: none;
	}
}