section:has(.breadcrumbs) {
	padding-top: 20px;
	padding-bottom: var(--distance-4);
}

section:has(.breadcrumbs) .breadcrumbs {
	padding: 0;
}

.breadcrumbs .item.first {
	position: relative;
}

.breadcrumbs .item.first .info {
	position: absolute;
	top: calc(100% + 5px);
	padding: 3px 5px;
	font-size: 12px;
	background-color: var(--bg-color-3);
	color: var(--text-color-0);
	left: 50%;
	transform: translateX(-50%);
	transition: var(--transition);
	opacity: 0;
	border-radius: var(--border-radius-3);
	line-height: 120%;
}

.breadcrumbs .item.first:has(a:hover) .info {
	opacity: 1;
}

.breadcrumbs .item.first a {
	width: 28px;
	height: 28px;
	border-radius: var(--border-radius-3);
	background-color: var(--bg-color-2);
	color: var(--text-color-2);
	transition: var(--transition);
	display: flex;
	align-items: center;
	justify-content: center;
}

.breadcrumbs .item.first svg {
	stroke-width: 2px;
}

.breadcrumbs .item:has(a+.arrow) {
	display: flex;
	gap: 15px;
}

.breadcrumbs .item.first a:hover {
	background-color: color-mix(in srgb, var(--main-color-1) 20%, transparent);
	color: var(--main-color-1);
}

.breadcrumbs .item:not(.first) a {
	color: var(--text-color-1);
}

.breadcrumbs .item:not(.first) a:hover {
	color: var(--main-color-1);
}

.breadcrumbs .item span {
	color: var(--text-color-2);
	cursor: default;
}

.breadcrumbs .structura-block {
	margin-top: 30px;
	border-radius: var(--border-radius-3);
	padding: 3px 5px;
	background-color: var(--bg-color-2);
	font-weight: 300;
	color: var(--bg-color-3);
	display: inline-block;
}