.breadcrumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.6rem;
	padding: 0 1rem;
	text-transform: uppercase;
}

.breadcrumbs a,
.breadcrumbs span {
	color: rgba(var(--color-foreground), 1);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: rgb(var(--color-foreground));
	text-decoration: underline;
	text-underline-offset: 0.2rem;
}

.breadcrumbs--hero-secondary {
	margin-bottom: 1rem;
}