.er-breadcrumb-rail {
  display: flex;
  min-height: 52px;
  align-items: center;
  background: var(--er-ivory);
  border-bottom: 1px solid var(--er-rule);
  color: var(--er-ink-2);
}

.er-breadcrumb-rail__inner {
  width: min(calc(100% - 32px), var(--er-container));
  margin-inline: auto;
  padding-block: 10px;
}

.er-breadcrumb,
.er-breadcrumb__list {
  min-width: 0;
}

.er-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--er-sans);
  font-size: var(--er-fs-ui);
  line-height: 1.55;
  letter-spacing: 0;
}

.er-breadcrumb__item {
  display: inline-flex;
  min-width: 0;
  align-items: baseline;
  color: var(--er-ink-2);
  overflow-wrap: break-word;
  word-break: normal;
}

.er-breadcrumb__item + .er-breadcrumb__item::before {
  content: "›";
  flex: 0 0 auto;
  margin-inline: 9px;
  color: var(--er-ink-4);
  font-weight: 500;
}

.er-breadcrumb__item a {
  color: var(--er-clay-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 48%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.er-breadcrumb__item a:hover {
  color: var(--er-ink);
  text-decoration-color: currentColor;
}

.er-breadcrumb__item a:focus-visible {
  border-radius: var(--er-r-sm);
  outline: 2px solid var(--er-clay-deep);
  outline-offset: 3px;
  color: var(--er-ink);
  text-decoration-color: currentColor;
}

.er-breadcrumb__item[aria-current="page"] {
  color: var(--er-ink);
  font-weight: 650;
}

@media (max-width: 480px) {
  .er-breadcrumb-rail__inner {
    width: min(calc(100% - 24px), var(--er-container));
  }

  .er-breadcrumb__item + .er-breadcrumb__item::before {
    margin-inline: 7px;
  }
}

@media print {
  .er-breadcrumb-rail {
    display: none;
  }
}