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

components/ContentType/StaticPages/staticPage.module.css

@@ -4,7 +4,7 @@
 
 .header {
   background-color: var(--Base-Surface-Subtle-Normal);
-  padding: var(--Spacing-x4) var(--Spacing-x2);
+  padding: var(--Spacing-x4) 0;
 }
 
 .headerContent {
@@ -32,9 +32,9 @@
 }
 
 .contentContainer {
+  padding-top: var(--Spacing-x4);
+  width: 100%;
   padding: var(--Spacing-x4) var(--Spacing-x2) 0;
-  max-width: var(--max-width-content);
-  margin: 0 auto;
 }
 
 .content .contentContainer {
@@ -48,9 +48,10 @@
 
 .mainContent {
   display: grid;
-  gap: var(--Spacing-x4);
   width: 100%;
   gap: var(--Spacing-x6);
+  margin: 0 auto;
+  max-width: var(--max-width-content);
 }
 
 .content .mainContent {
@@ -58,9 +59,21 @@
 }
 
 @media (min-width: 768px) {
+  .contentContainer {
+    padding: var(--Spacing-x4) 0;
+  }
+
+  .heroContainer {
+    padding: var(--Spacing-x4) 0;
+  }
+
   .headerIntro {
     gap: var(--Spacing-x3);
   }
+
+  .header {
+    padding: var(--Spacing-x4) 0;
+  }
 }
 
 @media (min-width: 1367px) {
@@ -70,6 +83,8 @@
 
   .contentContainer {
     padding: var(--Spacing-x4) 0 0;
+    max-width: var(--max-width-content);
+    margin: 0 auto;
   }
 
   .content .contentContainer {
@@ -80,5 +95,8 @@
 
   .mainContent {
     gap: var(--Spacing-x9);
+    padding: 0;
+    max-width: none;
+    margin: 0;
   }
 }