.breadcrumbs {
  --_breadcrumbs-gap: 12px;
  --_breadcrumbs-padding-block: 4rem 6rem;
  padding-block: var(--_breadcrumbs-padding-block);

  &.menu-breadcrumbs {
    --_breadcrumbs-padding-block: 3rem 5.25rem;
  }

  .breadcrumbs__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--_breadcrumbs-gap);

    .breadcrumbs__item {
      display: flex;
      align-items: center;
      padding: 0;
      gap: var(--_breadcrumbs-gap);

      &:after {
        content: '';
        position: relative;
        display: flex;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background-color: var(--theme-color-black);
      }

      .breadcrumbs__link {
        &:hover,
        &:focus {
          color: var(--theme-color-primary);
        }
      }

      &:last-of-type,
      &.breadcrumbs__item--last {
        color: var(--theme-color-primary);

        &:after {
          display: none;
        }
      }
    }
  }
}

@media screen and (min-width: 1000px) {
  .breadcrumbs.menu-breadcrumbs {
    --_breadcrumbs-padding-block: 3rem 4rem;
  }
}