/* ==========================================================================
   BREADCRUMB NAVIGATION
   ========================================================================== */

.breadcrumbs {
  margin: 20px 0 0;
  font-family: $sans-serif;
  font-size: 0.64rem;
  text-transform: uppercase;
}

.breadcrumb__item {
  display: inline-block;
  color: $text-color;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

/* separator */
.breadcrumb__sep {
  padding-left: 3px;
  padding-right: 3px;
}

/* ==========================================================================
   BREADCRUMB NAVIGATION
   ========================================================================== */

.breadcrumbs {
  display: none;
  @include breakpoint($small) {
    display: block;
    margin: 20px 0 0;
    font-family: $sans-serif;
    font-size: 0.64rem;
    text-transform: uppercase;
  }
}

.breadcrumb__item {
  display: inline-block;
  color: $text-color;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

/* separator */
.breadcrumb__sep {
  padding-left: 3px;
  padding-right: 3px;
}

Hide breadcrumbs on smaller screens
Hide breadcrumbs on smaller screens
