.breadcrumbs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 400;
  line-height: 114%;
  color: var(--color-grey-300);
}

@media (min-width: 900px) {
  .breadcrumbs {
    font-size: 0.875rem;
  }
}

@media (max-width: 899px) {
  .breadcrumbs {
    font-size: 0.75rem;
  }
}

.breadcrumbs a {
  position: relative;
  display: inline-block;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
  color: inherit;
}

html:not(.v-mobile) .breadcrumbs a:hover {
  color: var(--color-blue-100);
}

.breadcrumbs a:focus-visible {
  color: var(--color-blue-100);
}

.breadcrumbs a::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-blue-100);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

html:not(.v-mobile) .breadcrumbs a:hover::before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.breadcrumbs a:focus-visible::before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.breadcrumbs span {
  display: inline-block;
}