.breadcrumbs {
  font-size: 0.875rem;
  margin-block: 0 2rem;
}

.breadcrumbs__list {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.breadcrumbs__item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumbs__item.home {
  overflow: visible;
}

.breadcrumbs__link {
  font-weight: 500;
  text-decoration: underline;
}

.breadcrumbs__link:hover {
  filter: brightness(0.95);
  opacity: 1;
  text-decoration: underline;
}

.breadcrumbs__current {
  color: oklch(51% 0 0);
}

.breadcrumbs__separator {
  color: oklch(62.4% 0 0);
  min-width: 0.75rem;
}

@media screen and (width <=770px) {
  .breadcrumbs {
    display: none;
  }
}