.zfa-breadcrumb {
  /* background: #f7f9fc; */
  /* border-bottom: 1px solid rgba(12, 20, 27, 0.08); */
}

.zfa-breadcrumb__inner {
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.zfa-breadcrumb .zfa-container-narrow {
  width: 100%;
  width: min(1280px, 100%);
}

.zfa-breadcrumb__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 10px;
  padding: 0;
  font-size: clamp(12px, 0.9vw + 10px, 18px);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: rgba(12, 20, 27, 0.74);
  flex-wrap: wrap;
}

.zfa-breadcrumb__link {
  color: rgba(12, 20, 27, 0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(12, 20, 27, 0.22);
  padding-bottom: 1px;
}

.zfa-breadcrumb__link:hover {
  border-bottom-color: rgba(12, 20, 27, 0.55);
}

.zfa-breadcrumb__sep {
  color: rgba(12, 20, 27, 0.38);
  user-select: none;
}

.zfa-breadcrumb__current {
  color: rgba(12, 20, 27, 0.92);
  font-weight: 800;
}

.zfa-breadcrumb__inner.post-layout {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  max-width: 1280px;
}

.zfa-breadcrumb__inner.post-layout::after {
  content: '';
  display: block;
  width: 100%;
  height: 10px;
  margin-top: 12px;
  background: rgba(12, 20, 27, 0.26);
  border-radius: 999px;
}

@media (max-width: 560px) {
  .zfa-breadcrumb__inner {
    padding: 12px 0;
  }
}