.breadcrumb {
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	gap: 0.8rem;
	margin-bottom: 3rem;
	font-size: 1.2rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08rem;
}

.breadcrumb__track {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 0.8rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.breadcrumb__track::-webkit-scrollbar {
	display: none;
}

.breadcrumb__link,
.breadcrumb__sep,
.breadcrumb__current {
	flex-shrink: 0;
	white-space: nowrap;
}

.breadcrumb__link,
.breadcrumb__sep {
	color: var(--color-black);
	opacity: 0.3;
}

.breadcrumb__current {
	color: var(--color-accent);
}

.breadcrumb__scroll {
	flex-shrink: 0;
	color: var(--color-black);
	opacity: 0.3;
}

.breadcrumb__scroll--previous {
	order: -1;
}

.breadcrumb [hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.breadcrumb__track {
		scroll-behavior: auto;
	}
}