breadcrumbs style refactoring

src/style/breadcrumbs.scss

@@ -1,57 +0,0 @@
-nav.breadcrumbs{
-  width: 80%;
-  margin: 0 auto;
-  padding: .35em 0 0;
-  color: #bbb;
-
-  a {
-    color: #9990e0;
-  }
-
-  ul{
-    list-style: none;
-
-    li {
-      display: inline-block;
-
-      &:not(:first-child):before{
-        content: '⟶';
-        margin-left: .4em;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 31.25em) {
-  nav.breadcrumbs{
-    width: 100%;
-    margin: 0;
-    font-size: 0.75em;
-
-    ul{
-      li {
-        &:not(:first-child):before{
-          content: '>';
-          margin-left: .2em;
-        }
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 31.25em) and (max-width: 59.99999em){
-  nav.breadcrumbs{
-    width: 100%;
-    margin: 0;
-    font-size: 0.75em;
-
-    ul{
-      li {
-        &:not(:first-child):before{
-          content: '>';
-          margin-left: .2em;
-        }
-      }
-    }
-  }
-}

src/style/components/breadcrumbs.scss

@@ -0,0 +1,45 @@
+@import "../variables";
+
+$font-size: 0.75em;
+$item-active-color: $link-color;
+$item-inactive-color: $inactive-link-color;
+$separator: '⟶';
+$mobile-separator: '>';
+
+breadcrumbs{
+  padding: .35em 0 0;
+  color: $item-inactive-color;
+
+  a {
+    color: $item-active-color;
+  }
+
+  ul{
+    list-style: none;
+
+    li {
+      display: inline-block;
+
+      &:not(:first-child):before{
+        content: $separator;
+        margin-left: .4em;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: $mobile-width) {
+  breadcrumbs{
+    margin: 0;
+    font-size: $font-size;
+
+    ul{
+      li {
+        &:not(:first-child):before{
+          content: $mobile-separator;
+          margin-left: .2em;
+        }
+      }
+    }
+  }
+}

src/style/style.scss

@@ -1,3 +1,4 @@
 @import "./components/gallery-item";
 @import "./components/document";
-@import "./components/team-member-proifile";
+@import "./components/team-member-proifile";
+@import "./components/breadcrumbs";