.breadcrumb-container {
  background-color: $widget-gray-background;

  @include media-breakpoint-down(md) {
    @include unitize(padding-left, 15px);
  }

  &>.container {
    @include media-breakpoint-down(md) {
      max-width: 100%;
      padding-left: 0;
    }
  }

  @include media-breakpoint-up(lg) {
    @include unitize(margin-bottom, 40px);
  }
}

.breadcrumb {
  @include unitize(font-size, 17px);
  margin: 0;
  @include unitize(padding, 8px 0);
  list-style: none;
  background-color: transparent;
  @include unitize(border-radius, 4px);

  &-item:nth-child(2) {
    @include unitize(margin-left, 5px);

    @include media-breakpoint-down(xs) {
      @include unitize(margin-left, 0);
    }
  }

  &-item + &-item {
    &::before {
      font-family: "Font Awesome 5 Pro";
      font-weight: 300;
      @include unitize(font-size, 18px);
      content: "\f105";
      position: relative;
      @include unitize(top, 1px);
      color: $gray-500;
    }

    &:last-child {
      font-weight: bold;
    }
  }

  &-link {
    .active & {
      color: $brand-secondary;
    }
  }

  &>li:first-child {
    @include media-breakpoint-down(xs) {
      display: none;
    }
  }
}