/* ==========================================================================
   Breadcrumb — Mobile first
   ========================================================================== */

.breadcrumb {
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding: 16px 16px 0;
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	color: rgba(34, 34, 34, 0.5);
}

.breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.breadcrumb__link {
	color: rgba(34, 34, 34, 0.5);
	transition: color var(--transition);
}

.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
	color: var(--color-primary);
}

.breadcrumb__separator {
	color: rgba(34, 34, 34, 0.3);
	font-size: 0.75rem;
}

.breadcrumb__item [aria-current="page"] {
	color: var(--color-black);
	font-weight: 500;
}

/* ==========================================================================
   Breadcrumb — Desktop
   ========================================================================== */

@media (min-width: 768px) {
	.breadcrumb {
		padding: 24px 24px 0;
	}
}