.breadcrumbs {
padding: var(--spacing-md) 0;
background: var(--color-bg-muted);
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-lg);
}
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-padding);
}
.breadcrumbs li {
display: inline-flex;
align-items: center;
margin: 0;
}
.breadcrumbs a {
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--transition-fast);
}
.breadcrumbs a:hover {
color: var(--color-primary);
text-decoration: none;
}
.breadcrumbs li:last-child span {
color: var(--color-text-heading);
font-weight: 600;
}
@media (max-width: 768px) {
.breadcrumbs {
font-size: var(--font-size-xs);
padding: var(--spacing-sm) 0;
}
}