@oiz/stzh-components 2.0.0-beta → 2.0.0

package/dist/collection/components/stzh-cspace/stzh-cspace.css

@@ -111,25 +111,26 @@
 :host ::slotted(stzh-heading[level="1"]),
 :host ::slotted(h2),
 :host ::slotted(stzh-heading[level="2"]) {
-  margin-bottom: var(--stzh-space-medium);
+  margin-top: var(--stzh-space-xxlarge);
+  margin-bottom: var(--stzh-space-xlarge);
 }
-@media screen and (min-width: 600px) {
+@media screen and (min-width: 1024px) {
   :host ::slotted(h1),
 :host ::slotted(stzh-heading[level="1"]),
 :host ::slotted(h2),
 :host ::slotted(stzh-heading[level="2"]) {
-    margin-bottom: var(--stzh-space-large);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1260px) {
   :host ::slotted(h1),
 :host ::slotted(stzh-heading[level="1"]),
 :host ::slotted(h2),
 :host ::slotted(stzh-heading[level="2"]) {
-    margin-bottom: var(--stzh-space-xlarge);
+    margin-top: var(--stzh-space-xxxxlarge);
   }
 }
-@media screen and (min-width: 1260px) {
+@media screen and (min-width: 1024px) {
   :host ::slotted(h1),
 :host ::slotted(stzh-heading[level="1"]),
 :host ::slotted(h2),
@@ -137,86 +138,34 @@
     margin-bottom: var(--stzh-space-xxlarge);
   }
 }
-:host ::slotted(h1),
-:host ::slotted(stzh-heading[level="1"]) {
-  margin-top: var(--stzh-space-large);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(h1),
-:host ::slotted(stzh-heading[level="1"]) {
-    margin-top: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 1024px) {
-  :host ::slotted(h1),
-:host ::slotted(stzh-heading[level="1"]) {
-    margin-top: var(--stzh-space-xxlarge);
-  }
-}
 @media screen and (min-width: 1260px) {
   :host ::slotted(h1),
-:host ::slotted(stzh-heading[level="1"]) {
-    margin-top: var(--stzh-space-xxxxlarge);
-  }
-}
+:host ::slotted(stzh-heading[level="1"]),
 :host ::slotted(h2),
 :host ::slotted(stzh-heading[level="2"]) {
-  margin-top: var(--stzh-space-xxlarge);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(h2),
-:host ::slotted(stzh-heading[level="2"]) {
-    margin-top: var(--stzh-space-xxxxlarge);
-  }
-}
-@media screen and (min-width: 1260px) {
-  :host ::slotted(h2),
-:host ::slotted(stzh-heading[level="2"]) {
-    margin-top: var(--stzh-space-xbig);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(h3),
-:host ::slotted(stzh-heading[level="3"]) {
-  margin-top: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(h3),
-:host ::slotted(stzh-heading[level="3"]) {
-    margin-top: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1024px) {
-  :host ::slotted(h3),
-:host ::slotted(stzh-heading[level="3"]) {
-    margin-top: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 1260px) {
-  :host ::slotted(h3),
-:host ::slotted(stzh-heading[level="3"]) {
-    margin-top: var(--stzh-space-xxlarge);
-  }
-}
+:host ::slotted(stzh-heading[level="3"]),
 :host ::slotted(h4),
 :host ::slotted(stzh-heading[level="4"]) {
-  margin-top: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(h4),
-:host ::slotted(stzh-heading[level="4"]) {
-    margin-top: var(--stzh-space-large);
-  }
+  margin-top: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(h4),
+  :host ::slotted(h3),
+:host ::slotted(stzh-heading[level="3"]),
+:host ::slotted(h4),
 :host ::slotted(stzh-heading[level="4"]) {
-    margin-top: var(--stzh-space-xlarge);
+    margin-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(h4),
+  :host ::slotted(h3),
+:host ::slotted(stzh-heading[level="3"]),
+:host ::slotted(h4),
 :host ::slotted(stzh-heading[level="4"]) {
-    margin-top: var(--stzh-space-xxlarge);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(p),
@@ -238,6 +187,16 @@
     margin-top: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  :host ::slotted(p),
+:host ::slotted(stzh-text),
+:host ::slotted(ul),
+:host ::slotted(ol),
+:host ::slotted(dl),
+:host ::slotted(stzh-list) {
+    margin-top: var(--stzh-space-large);
+  }
+}
 @media screen and (min-width: 1024px) {
   :host ::slotted(p),
 :host ::slotted(stzh-text),
@@ -248,48 +207,44 @@
     margin-bottom: var(--stzh-space-medium);
   }
 }
-:host ::slotted(stzh-text[curve=hero]),
-:host ::slotted(stzh-heading[curve=hero]) {
-  margin-bottom: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-text[curve=hero]),
-:host ::slotted(stzh-heading[curve=hero]) {
+@media screen and (min-width: 1260px) {
+  :host ::slotted(p),
+:host ::slotted(stzh-text),
+:host ::slotted(ul),
+:host ::slotted(ol),
+:host ::slotted(dl),
+:host ::slotted(stzh-list) {
     margin-bottom: var(--stzh-space-large);
   }
 }
+:host ::slotted(stzh-text[curve=hero]),
+:host ::slotted(stzh-heading[curve=hero]) {
+  margin-bottom: var(--stzh-space-xlarge);
+}
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-text[curve=hero]),
 :host ::slotted(stzh-heading[curve=hero]) {
-    margin-bottom: var(--stzh-space-xlarge);
+    margin-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(stzh-text[curve=hero]),
 :host ::slotted(stzh-heading[curve=hero]) {
-    margin-bottom: var(--stzh-space-xxlarge);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(stzh-text[curve=h1]),
 :host ::slotted(stzh-heading[curve=h1]),
 :host ::slotted(stzh-text[curve=h2]),
 :host ::slotted(stzh-heading[curve=h2]) {
-  margin-bottom: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-text[curve=h1]),
-:host ::slotted(stzh-heading[curve=h1]),
-:host ::slotted(stzh-text[curve=h2]),
-:host ::slotted(stzh-heading[curve=h2]) {
-    margin-bottom: var(--stzh-space-large);
-  }
+  margin-bottom: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-text[curve=h1]),
 :host ::slotted(stzh-heading[curve=h1]),
 :host ::slotted(stzh-text[curve=h2]),
 :host ::slotted(stzh-heading[curve=h2]) {
-    margin-bottom: var(--stzh-space-xlarge);
+    margin-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -297,89 +252,51 @@
 :host ::slotted(stzh-heading[curve=h1]),
 :host ::slotted(stzh-text[curve=h2]),
 :host ::slotted(stzh-heading[curve=h2]) {
-    margin-bottom: var(--stzh-space-xxlarge);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(stzh-text[curve=h1]),
-:host ::slotted(stzh-heading[curve=h1]) {
-  margin-top: var(--stzh-space-large);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-text[curve=h1]),
-:host ::slotted(stzh-heading[curve=h1]) {
-    margin-top: var(--stzh-space-xlarge);
-  }
+:host ::slotted(stzh-heading[curve=h1]),
+:host ::slotted(stzh-text[curve=h2]),
+:host ::slotted(stzh-heading[curve=h2]) {
+  margin-top: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-text[curve=h1]),
-:host ::slotted(stzh-heading[curve=h1]) {
-    margin-top: var(--stzh-space-xxlarge);
+:host ::slotted(stzh-heading[curve=h1]),
+:host ::slotted(stzh-text[curve=h2]),
+:host ::slotted(stzh-heading[curve=h2]) {
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(stzh-text[curve=h1]),
-:host ::slotted(stzh-heading[curve=h1]) {
-    margin-top: var(--stzh-space-xxxxlarge);
-  }
-}
+:host ::slotted(stzh-heading[curve=h1]),
 :host ::slotted(stzh-text[curve=h2]),
-:host ::slotted(stzh-heading[curve=h2]) {
-  margin-top: var(--stzh-space-xxlarge);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-text[curve=h2]),
 :host ::slotted(stzh-heading[curve=h2]) {
     margin-top: var(--stzh-space-xxxxlarge);
   }
 }
-@media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-text[curve=h2]),
-:host ::slotted(stzh-heading[curve=h2]) {
-    margin-top: var(--stzh-space-xbig);
-  }
-}
 :host ::slotted(stzh-text[curve=h3]),
-:host ::slotted(stzh-heading[curve=h3]) {
-  margin-top: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-text[curve=h3]),
-:host ::slotted(stzh-heading[curve=h3]) {
-    margin-top: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1024px) {
-  :host ::slotted(stzh-text[curve=h3]),
-:host ::slotted(stzh-heading[curve=h3]) {
-    margin-top: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-text[curve=h3]),
-:host ::slotted(stzh-heading[curve=h3]) {
-    margin-top: var(--stzh-space-xxlarge);
-  }
-}
+:host ::slotted(stzh-heading[curve=h3]),
 :host ::slotted(stzh-text[curve=h4]),
 :host ::slotted(stzh-heading[curve=h4]) {
-  margin-top: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-text[curve=h4]),
-:host ::slotted(stzh-heading[curve=h4]) {
-    margin-top: var(--stzh-space-large);
-  }
+  margin-top: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(stzh-text[curve=h4]),
+  :host ::slotted(stzh-text[curve=h3]),
+:host ::slotted(stzh-heading[curve=h3]),
+:host ::slotted(stzh-text[curve=h4]),
 :host ::slotted(stzh-heading[curve=h4]) {
-    margin-top: var(--stzh-space-xlarge);
+    margin-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(stzh-text[curve=h4]),
+  :host ::slotted(stzh-text[curve=h3]),
+:host ::slotted(stzh-heading[curve=h3]),
+:host ::slotted(stzh-text[curve=h4]),
 :host ::slotted(stzh-heading[curve=h4]) {
-    margin-top: var(--stzh-space-xxlarge);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(stzh-text[curve=p1]),
@@ -397,6 +314,14 @@
     margin-top: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  :host ::slotted(stzh-text[curve=p1]),
+:host ::slotted(stzh-text[curve=p2]),
+:host ::slotted(stzh-heading[curve=p1]),
+:host ::slotted(stzh-heading[curve=p2]) {
+    margin-top: var(--stzh-space-large);
+  }
+}
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-text[curve=p1]),
 :host ::slotted(stzh-text[curve=p2]),
@@ -405,6 +330,14 @@
     margin-bottom: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  :host ::slotted(stzh-text[curve=p1]),
+:host ::slotted(stzh-text[curve=p2]),
+:host ::slotted(stzh-heading[curve=p1]),
+:host ::slotted(stzh-heading[curve=p2]) {
+    margin-bottom: var(--stzh-space-large);
+  }
+}
 :host ::slotted(stzh-figure) {
   margin-top: var(--stzh-space-xxlarge);
   margin-bottom: var(--stzh-space-xxlarge);
@@ -413,23 +346,15 @@
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
-  margin-top: var(--stzh-space-large);
-  margin-bottom: var(--stzh-space-large);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-datalist),
-:host ::slotted(stzh-progressbar),
-:host ::slotted(stzh-section),
-:host ::slotted(stzh-hr) {
-    margin-top: var(--stzh-space-xlarge);
-  }
+  margin-top: var(--stzh-space-xxlarge);
+  margin-bottom: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-datalist),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
-    margin-top: var(--stzh-space-xxlarge);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -440,20 +365,12 @@
     margin-top: var(--stzh-space-xxxxlarge);
   }
 }
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-datalist),
-:host ::slotted(stzh-progressbar),
-:host ::slotted(stzh-section),
-:host ::slotted(stzh-hr) {
-    margin-bottom: var(--stzh-space-xlarge);
-  }
-}
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-datalist),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
-    margin-bottom: var(--stzh-space-xxlarge);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -467,7 +384,7 @@
 :host ::slotted(stzh-table),
 :host ::slotted(stzh-datatable) {
   margin-top: var(--stzh-space-medium);
-  margin-bottom: var(--stzh-space-medium);
+  margin-bottom: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-table),
@@ -481,22 +398,16 @@
     margin-top: var(--stzh-space-xlarge);
   }
 }
-@media screen and (min-width: 600px) {
-  :host ::slotted(stzh-table),
-:host ::slotted(stzh-datatable) {
-    margin-bottom: var(--stzh-space-large);
-  }
-}
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-table),
 :host ::slotted(stzh-datatable) {
-    margin-bottom: var(--stzh-space-xlarge);
+    margin-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(stzh-table),
 :host ::slotted(stzh-datatable) {
-    margin-bottom: var(--stzh-space-xxlarge);
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 :host ::slotted(stzh-actions) {

package/dist/collection/components/stzh-datamessagelist-item/stzh-datamessagelist-item.css

@@ -95,7 +95,7 @@
 }
 
 .stzh-datamessagelist-item {
-  padding-left: var(--stzh-space-medium);
+  padding-left: var(--stzh-space-xlarge);
   padding-right: var(--stzh-space-medium);
   display: flex;
   position: relative;
@@ -103,19 +103,14 @@
   background-color: var(--stzh-color-white);
   /* Unread variant */
 }
-@media screen and (min-width: 600px) {
-  .stzh-datamessagelist-item {
-    padding-left: var(--stzh-space-large);
-  }
-}
 @media screen and (min-width: 1024px) {
   .stzh-datamessagelist-item {
-    padding-left: var(--stzh-space-xlarge);
+    padding-left: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-datamessagelist-item {
-    padding-left: var(--stzh-space-xxlarge);
+    padding-left: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1024px) {

package/dist/collection/components/stzh-datatable/stzh-datatable.css

@@ -131,6 +131,11 @@ stzh-datatable *::after {
     padding-bottom: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  .stzh-datatable__header {
+    padding-bottom: var(--stzh-space-large);
+  }
+}
 @media screen and (min-width: 1024px) {
   .stzh-datatable__header {
     margin-bottom: var(--stzh-space-large);

package/dist/collection/components/stzh-dialog/stzh-dialog.css

@@ -96,20 +96,20 @@
 
 :host {
   --width: 100%;
-  --padding: var(--stzh-space-large);
+  --padding: var(--stzh-space-xxlarge);
   --close-color: var(--stzh-base-lead-color);
   --backdrop-opacity: 0.8;
 }
 @media screen and (min-width: 600px) {
   :host {
     --width: 33.5rem;
-    --padding: var(--stzh-space-xlarge);
+    --padding: ;
   }
 }
 @media screen and (min-width: 1024px) {
   :host {
     --width: 48.875rem;
-    --padding: var(--stzh-space-xxlarge);
+    --padding: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -194,39 +194,29 @@
 }
 .stzh-dialog__dialog-content {
   padding: var(--padding);
-  padding-top: var(--stzh-space-medium);
-  padding-bottom: var(--stzh-space-medium);
+  padding-top: var(--stzh-space-xlarge);
+  padding-bottom: var(--stzh-space-xlarge);
   overflow: auto;
   flex-grow: 1;
 }
-@media screen and (min-width: 600px) {
-  .stzh-dialog__dialog-content {
-    padding-top: var(--stzh-space-large);
-  }
-}
 @media screen and (min-width: 1024px) {
-  .stzh-dialog__dialog-content {
-    padding-top: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 1260px) {
   .stzh-dialog__dialog-content {
     padding-top: var(--stzh-space-xxlarge);
   }
 }
-@media screen and (min-width: 600px) {
+@media screen and (min-width: 1260px) {
   .stzh-dialog__dialog-content {
-    padding-bottom: var(--stzh-space-large);
+    padding-top: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1024px) {
   .stzh-dialog__dialog-content {
-    padding-bottom: var(--stzh-space-xlarge);
+    padding-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-dialog__dialog-content {
-    padding-bottom: var(--stzh-space-xxlarge);
+    padding-bottom: var(--stzh-space-xxxlarge);
   }
 }
 .stzh-dialog__actions {

package/dist/collection/components/stzh-ghettobox/stzh-ghettobox.css

@@ -114,24 +114,19 @@
 }
 
 .stzh-ghettobox {
-  padding-top: var(--stzh-space-large);
-  padding-bottom: var(--stzh-space-large);
-  padding-left: var(--stzh-space-xxlarge);
-  padding-right: var(--stzh-space-xxlarge);
+  padding-top: var(--stzh-space-xxlarge);
+  padding-bottom: var(--stzh-space-xxlarge);
+  padding-left: var(--stzh-space-xxxlarge);
+  padding-right: var(--stzh-space-xxxlarge);
   position: relative;
   display: flex;
   background-color: var(--background-color);
   color: var(--color);
   box-shadow: var(--stzh-box-shadow-message);
 }
-@media screen and (min-width: 600px) {
-  .stzh-ghettobox {
-    padding-top: var(--stzh-space-xlarge);
-  }
-}
 @media screen and (min-width: 1024px) {
   .stzh-ghettobox {
-    padding-top: var(--stzh-space-xxlarge);
+    padding-top: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -139,14 +134,9 @@
     padding-top: var(--stzh-space-xxxxlarge);
   }
 }
-@media screen and (min-width: 600px) {
-  .stzh-ghettobox {
-    padding-bottom: var(--stzh-space-xlarge);
-  }
-}
 @media screen and (min-width: 1024px) {
   .stzh-ghettobox {
-    padding-bottom: var(--stzh-space-xxlarge);
+    padding-bottom: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -159,6 +149,11 @@
     padding-left: var(--stzh-space-xxxxlarge);
   }
 }
+@media screen and (min-width: 1024px) {
+  .stzh-ghettobox {
+    padding-left: var(--stzh-space-big);
+  }
+}
 @media screen and (min-width: 1260px) {
   .stzh-ghettobox {
     padding-left: var(--stzh-space-xbig);
@@ -250,6 +245,11 @@
     margin-top: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  .stzh-ghettobox__description:not(:empty), .stzh-ghettobox__button:not(:empty) {
+    margin-top: var(--stzh-space-large);
+  }
+}
 .stzh-ghettobox__close {
   flex-shrink: 0;
 }

package/dist/collection/components/stzh-heading/stzh-heading.css

@@ -134,37 +134,27 @@
   padding-bottom: var(--stzh-space-xsmall);
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);
 }
-@media screen and (min-width: 600px) {
-  .stzh-heading--with-border {
-    padding-bottom: var(--stzh-space-small);
-  }
-}
 @media screen and (min-width: 1024px) {
   .stzh-heading--with-border {
-    padding-bottom: var(--stzh-space-medium);
+    padding-bottom: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-heading--with-border {
-    padding-bottom: var(--stzh-space-large);
+    padding-bottom: var(--stzh-space-medium);
   }
 }
 .stzh-heading--curve-hero.stzh-heading--with-border {
-  padding-bottom: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  .stzh-heading--curve-hero.stzh-heading--with-border {
-    padding-bottom: var(--stzh-space-large);
-  }
+  padding-bottom: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   .stzh-heading--curve-hero.stzh-heading--with-border {
-    padding-bottom: var(--stzh-space-xlarge);
+    padding-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-heading--curve-hero.stzh-heading--with-border {
-    padding-bottom: var(--stzh-space-xxlarge);
+    padding-bottom: var(--stzh-space-xxxlarge);
   }
 }
 .stzh-heading--level-1 {