.breadcrumbs{
  background-color:var(--color-background-light);
  border-bottom:0.1rem solid var(--color-border);

  @media (width < 1024px){
    padding:var(--space-lg);
  }

  @media (width >= 1024px){
    padding:var(--space-xl);
  }

  .breadcrumbs__inner{
    margin-inline:auto;
    max-width:var(--l-max-width);
    width:100%;
  }

  .breadcrumb{
    align-items:center;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    list-style:none;

    .breadcrumb__item{
      color:var(--color-text-primary);

      &:not(:last-of-type){
        margin-right:var(--space-sm);

        &::after{
          content:"|";
          position:relative;
          right:0;
          top:0;
        }
      }

      &:last-of-type{
        font-weight:var(--font-weight-bold);
      }
    }

    .breadcrumb__link{
      color:inherit;

      @media (width >= 1024px){

        &:hover{
          text-decoration:underline;
        }
      }
    }
  }
}