fix: refactor breadcrumbs to take page type variants to better match margins

components/Header/MainMenu/mainMenu.module.css

@@ -1,6 +1,6 @@
 .mainMenu {
   background-color: var(--Base-Surface-Primary-light-Normal);
-  padding: var(--Spacing-x2);
+  padding: var(--Spacing-x2) 0;
   border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
 }
 
@@ -12,6 +12,8 @@
   grid-template-columns: max-content 1fr;
   align-items: center;
   gap: var(--Spacing-x2);
+  max-width: var(--max-width-page);
+  margin: 0 auto;
 }
 
 .menus {
@@ -31,6 +33,9 @@
 }
 
 @media screen and (min-width: 768px) {
+  .mainMenu {
+    padding: var(--Spacing-x2) 0;
+  }
   .nav {
     display: flex;
     justify-content: space-between;