/*!***************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-1.use[2]!./node_modules/group-css-media-queries-loader/lib/index.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/ui/breadcrumb.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************/
.breadcrumb {
  padding-top: 20px;
  background: var(--light-gray-color);
}
.breadcrumb__list {
  display: flex;
  align-items: center;
  -moz-column-gap: 50px;
       column-gap: 50px;
  font-size: 14px;
  font-weight: 400;
  color: var(--white-opacity-30-color);
}
.breadcrumb__back-catalog {
  margin-right: 38px;
  text-decoration: none;
  border-bottom: 1px solid var(--white-opacity-30-color);
  cursor: pointer;
  color: var(--white-opacity-30-color);
}
.breadcrumb__list {
  display: flex;
  align-items: center;
  -moz-column-gap: 12px;
       column-gap: 12px;
  margin: 0;
}
.breadcrumb__item {
  position: relative;
  cursor: pointer;
}
.breadcrumb__item a {
  color: var(--white-opacity-30-color);
}
.breadcrumb__item:last-child a {
  color: var(--black-color);
}
.breadcrumb__item:not(:last-child)::after {
  position: absolute;
  content: "/";
  top: 0;
  right: -8px;
}