feat: enhance breadcrumb and media styles for improved layout and responsiveness

assets/css/_core/_breadcrumb.scss

@@ -2,9 +2,22 @@
   padding-inline: 1rem;
   font-size: 0.75rem;
   background-color: $global-background-color;
+  display: flex;
+  gap: 0.5rem;
   @include z-index(1);
   @extend .print-d-none;
 
+  &:has(~ main[data-reverse]) {
+    flex-direction: row-reverse;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    padding-inline: 0.5rem;
+  }
+
   [data-theme='dark'] & {
     background-color: $global-background-color-dark;
   }

assets/css/_core/_media.scss

@@ -41,16 +41,38 @@
 }
 
 @media only screen and (max-width: 1200px) and (min-width: 961px) {
-  .wrapper main {
-    // Hide empty aside and expand article when only one aside is empty
-    aside:first-child:empty:has(~ aside:not(:empty)),
-    aside:first-child:not(:empty) ~ aside#toc-auto:empty {
-      display: none;
+  .wrapper {
+    main {
+      // Hide empty aside and expand article when only one aside is empty
+      aside:first-child:empty:has(~ aside:not(:empty)),
+      aside:first-child:not(:empty) ~ aside#toc-auto:empty {
+        display: none;
+      }
+  
+      aside:first-child:empty:has(~ aside:not(:empty)) ~ article,
+      aside:first-child:not(:empty) ~ article:has(~ aside:empty) {
+        flex: 3;
+      }
     }
 
-    aside:first-child:empty:has(~ aside:not(:empty)) ~ article,
-    aside:first-child:not(:empty) ~ article:has(~ aside:empty) {
-      flex: 3;
+    // Adjust breadcrumb flex when asides are empty
+    &:has(main > aside:first-child:empty ~ aside:not(:empty)) .breadcrumb-container {
+      .breadcrumb {
+        flex: 3;
+      }
+
+      &::before {
+        display: none;
+      }
+    }
+    &:has(main > aside:first-child:not(:empty) ~ aside#toc-auto:empty) .breadcrumb-container {
+      .breadcrumb {
+        flex: 3;
+      }
+
+      &::after {
+        display: none;
+      }
     }
   }
 }