.breadcrumbs {
	width: 100%;
}

.breadcrumbs .breadcrumbs__list {
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs .breadcrumbs__link,
.breadcrumbs .breadcrumbs__text,
.breadcrumbs .breadcrumbs__sep {
	font-family: 'Roboto', sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
}

.breadcrumbs__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	flex: 0 1 auto;
}

.breadcrumbs__link,
.breadcrumbs__text {
	display: block;
	word-break: break-word;
	text-decoration: none;
	transition: color 0.24s ease;
}

.breadcrumbs__link {
	color: var(--color-base-black-40);
}

.breadcrumbs__link:hover {
	color: var(--color-primary-300);
}

.breadcrumbs__item.--current .breadcrumbs__text {
	color: var(--color-primary-300);
}

.breadcrumbs__sep {
	flex: 0 0 auto;
	color: var(--color-base-black-40);
	white-space: nowrap;
}

@media screen and (max-width: 63.99875rem) {
	.breadcrumbs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

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

	.breadcrumbs .breadcrumbs__list {
		flex-wrap: nowrap;
		width: max-content;
		min-width: 100%;
	}

	.breadcrumbs__item {
		flex: 0 0 auto;
	}

	.breadcrumbs__link,
	.breadcrumbs__text {
		white-space: nowrap;
		word-break: normal;
	}
}

@media screen and (min-width: 64rem) {
	.breadcrumbs .breadcrumbs__list {
		flex-wrap: wrap;
	}

	.breadcrumbs .breadcrumbs__link,
	.breadcrumbs .breadcrumbs__text,
	.breadcrumbs .breadcrumbs__sep {
		font-size: 1.25rem;
	}
}