.breadcrumbs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-medium);
  line-height: var(--font-line-height-medium);
  color: var(--color-gray3);
}

.breadcrumbs__container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  align-items: center;
}

.breadcrumbs__item {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-gray3);
}

.breadcrumbs__item:last-child {
  font-size: var(--font-size-large);
  line-height: var(--font-line-height-large);
  color: var(--color-gray1);
}

.breadcrumbs__item--link {
  cursor: pointer;
}

.breadcrumbs__separator {
  width: 20px;
}

.breadcrumbs__separator:last-of-type {
  display: none;
}

@media (min-width: 768px) {
  .breadcrumbs {
    flex-direction: row;
    gap: 2px;
    align-items: center;
  }

  .breadcrumbs__separator:last-of-type {
    display: flex;
  }
}