.breadcrumbs-container {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  background-color: var(--color-bg-6);
  backdrop-filter: blur(10px);
  width: fit-content;
  border-radius: 50px;
  padding: 6px 12px;
  white-space: nowrap;
  justify-content: flex-start;
  max-width: 100%;
}

.breadcrumbs-container a {
  text-decoration: none;
}

.breadcrumbs-container a {
  color: var(--color-text-3);
}

.breadcrumbs-container a.active {
  color: white;
}

.breadcrumbs-container a:not(:last-child)::after {
  content: " /";
  margin-left: 4px;
}

.breadcrumbs-container.dark {
  background-color: #fff;
}
.breadcrumbs-container.dark a {
  color: var(--color-text-4);
}
.breadcrumbs-container.dark a.active {
  color: var(--color-text-1);
}

@media (max-width: 768px) {
  .breadcrumbs-container {
    max-width: 90%;
  }
}