.breadcrumbs {
  --breadcrumbs-text: color-mix(in srgb, var(--purple) 68%, transparent);
  --breadcrumbs-divider: color-mix(in srgb, var(--purple) 42%, transparent);
  --breadcrumbs-current: var(--purple);
  color: var(--breadcrumbs-text);
  margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
  font-size: clamp(.78rem, .74rem + .12vw, .9rem);
  line-height: 1.35;
  min-width: 0;
}

.breadcrumbs--dark {
  --breadcrumbs-text: color-mix(in srgb, var(--white) 68%, transparent);
  --breadcrumbs-divider: color-mix(in srgb, var(--white) 42%, transparent);
  --breadcrumbs-current: var(--white);
}

.breadcrumbs--light {
  --breadcrumbs-text: color-mix(in srgb, var(--purple) 68%, transparent);
  --breadcrumbs-divider: color-mix(in srgb, var(--purple) 42%, transparent);
  --breadcrumbs-current: var(--purple);
}

.breadcrumbs.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.breadcrumbs.breadcrumbs li + li::before {
  content: "›";
  color: var(--breadcrumbs-divider);
  flex: none;
  margin-right: .6rem;
}

.breadcrumbs.breadcrumbs a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.breadcrumbs.breadcrumbs a:hover {
  color: var(--orange);
}

.breadcrumbs.breadcrumbs [aria-current="page"] {
  color: var(--breadcrumbs-current);
  font-weight: 700;
  overflow-wrap: anywhere;
}