/* 1. Container and list stay the same */
nav.breadcrumbs {}

nav.breadcrumbs > ol {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 2. List items */
nav.breadcrumbs li {
  margin: 0 10px .2rem 0;
  display: flex;                 /* needed so the arrow aligns vertically */
  align-items: center;
}

/* 3. Text styling */
nav.breadcrumbs span,
nav.breadcrumbs a {
  font-family: 'Roboto', sans-serif;
  font-size: 12pt;
  text-transform: none;
  text-decoration: none;
}

/* 4. Pseudo-element arrow */
/*    The selector targets every <li> that is immediately preceded by another <li>. */
nav.breadcrumbs li + li::before {
  content: '';                   /* content must be present, even if empty */
  display: inline-block;
  width: 8px;
  height: 16px;
  margin-right: 10px;            /* space before the next crumb */
  background: url('/images/fa/solid/caret-right.svg') no-repeat center;
  background-size: contain;      /* scales the SVG to fit the box */
  flex-shrink: 0;                /* keep the icon from squashing */
}

/* 5. Remove the old rule for <li> > img
   nav.breadcrumbs li > img { … } */