.breadcrumb-1 {
  display: flex;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 2rem;
  background: transparent;

  li {
    display: flex;
  }
}

.breadcrumb-2 {
  display: flex;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 2rem;
  background: transparent;

  li {
    display: flex;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    color: #868e96;
    content: "→";
  }
}

.breadcrumb-3 {
  display: flex;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 2rem;
  background: transparent;

  li {
    display: flex;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    color: #868e96;
    content: "›";
  }
}

.breadcrumb-4 {
  display: flex;
  margin-bottom: 1rem;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background: transparent;

  li {
    display: flex;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    color: #868e96;
    content: "›";
  }
}