breadcrumb changes

resources/css/app.css

@@ -20,6 +20,8 @@
 /* COMPONENTS */
 @import './components/heading-box.css';
 @import './components/previous-next-posts.css';
+@import './components/nav.css';
+@import './components/search-module.css';
 
 /* BLOCKS */
 @import './blocks/search-artisan-btn.css';

resources/css/components/nav.css

@@ -0,0 +1,31 @@
+.breadcrumbs_navigation {
+  ol {
+    @apply w-full inline-flex;
+    white-space: normal;
+    li:before {
+      @apply block absolute;
+    }
+    li:not(:nth-child(1)) a {
+      @apply block ml-3;
+    }
+
+    @media screen and (max-width: 800px) {
+      li {
+        /* flex-grow: 1; */
+        @apply w-fit;
+      }
+
+      li:not(:nth-child(1)) a {
+        flex-grow: 1;
+        width: 100px !important;
+        max-width: calc(100% - 1rem);
+        word-wrap: break-word;
+        white-space: normal;
+      }
+
+      li:nth-child(1) {
+        flex-grow: 0;
+      }
+    }
+  }
+}