.breadcrumbs {
  display: block;

  font-weight: 400;
  line-height: 1.4;
  color: var(--color-grey-300);

  font-size: clamp(0.75rem, 2vw, 0.875rem);
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.breadcrumbs > span:first-child:last-child {
  display: contents;
}

.breadcrumbs a {
  display: inline;
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--color-blue-100), var(--color-blue-100));
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: color 0.3s ease, background-size 0.3s ease;
}

html:not(.v-mobile) .breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
  color: var(--color-blue-100);
  background-size: 100% 1px;
  outline: none;
}

.breadcrumbs span {
  color: var(--color-grey-400);
}

.breadcrumbs .breadcrumb_last {
  color: var(--color-blue-200);
  font-weight: 500;
  display: inline;
}

@media (max-width: 899px) {
  .breadcrumbs {
    line-height: 1.6;
  }
  .breadcrumbs span {
    white-space: normal;
    word-break: break-word;
  }
}