@zanichelli/albe-web-components 20.0.4 → 20.1.0

package/dist/web-components-library/web-components-library.css

@@ -167,19 +167,99 @@
   --font-size-16: 5.25rem; /* 84px */
   --font-size-17: 5.75rem; /* 92px */
 
-  /* cssprops to use with `font` shorthand property */
+  /* CSS props to use with the `font` shorthand property */
   --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);
   --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);
   --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);
   --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);
   --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);
   --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);
+  --heading-1: var(--font-rg) var(--font-size-7) / 1.28 var(--font-family-sans);
+  --heading-1-serif: var(--font-rg) var(--font-size-7) / 1.28 var(--font-family-serif);
+  --heading-1-sb: var(--font-sb) var(--font-size-7) / 1.28 var(--font-family-sans);
+  --heading-1-sb-serif: var(--font-sb) var(--font-size-7) / 1.28 var(--font-family-serif);
+  --heading-1-lt: var(--font-lt) var(--font-size-7) / 1.28 var(--font-family-sans);
+  --heading-1-lt-serif: var(--font-lt) var(--font-size-7) / 1.28 var(--font-family-serif);
+  --heading-2: var(--font-rg) var(--font-size-6) / 1.333 var(--font-family-sans);
+  --heading-2-serif: var(--font-rg) var(--font-size-6) / 1.333 var(--font-family-serif);
+  --heading-2-sb: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-sans);
+  --heading-2-sb-serif: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);
+  --heading-2-lt: var(--font-lt) var(--font-size-6) / 1.333 var(--font-family-sans);
+  --heading-2-lt-serif: var(--font-lt) var(--font-size-6) / 1.333 var(--font-family-serif);
+  --heading-3: var(--font-rg) var(--font-size-6) / 1.333 var(--font-family-sans);
+  --heading-3-serif: var(--font-rg) var(--font-size-6) / 1.333 var(--font-family-serif);
+  --heading-3-sb: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-sans);
+  --heading-3-sb-serif: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);
+  --heading-3-lt: var(--font-lt) var(--font-size-6) / 1.333 var(--font-family-sans);
+  --heading-3-lt-serif: var(--font-lt) var(--font-size-6) / 1.333 var(--font-family-serif);
+  --heading-4: var(--font-rg) var(--font-size-5) / 1.4 var(--font-family-sans);
+  --heading-4-serif: var(--font-rg) var(--font-size-5) / 1.4 var(--font-family-serif);
+  --heading-4-sb: var(--font-sb) var(--font-size-5) / 1.4 var(--font-family-sans);
+  --heading-4-sb-serif: var(--font-sb) var(--font-size-5) / 1.4 var(--font-family-serif);
+  --heading-4-lt: var(--font-lt) var(--font-size-5) / 1.4 var(--font-family-sans);
+  --heading-4-lt-serif: var(--font-lt) var(--font-size-5) / 1.4 var(--font-family-serif);
+  --body-1: var(--font-rg) var(--font-size-5) / 1.4 var(--font-family-sans);
+  --body-1-serif: var(--font-rg) var(--font-size-5) / 1.4 var(--font-family-serif);
+  --body-1-sb: var(--font-sb) var(--font-size-5) / 1.4 var(--font-family-sans);
+  --body-1-sb-serif: var(--font-sb) var(--font-size-5) / 1.4 var(--font-family-serif);
+  --body-2: var(--font-rg) var(--font-size-4) / 1.5 var(--font-family-sans);
+  --body-2-serif: var(--font-rg) var(--font-size-4) / 1.5 var(--font-family-serif);
+  --body-2-sb: var(--font-sb) var(--font-size-4) / 1.5 var(--font-family-sans);
+  --body-2-sb-serif: var(--font-sb) var(--font-size-4) / 1.5 var(--font-family-serif);
+  --body-3: var(--font-rg) var(--font-size-3) / 1.5 var(--font-family-sans);
+  --body-3-serif: var(--font-rg) var(--font-size-3) / 1.5 var(--font-family-serif);
+  --body-3-sb: var(--font-sb) var(--font-size-3) / 1.5 var(--font-family-sans);
+  --body-3-sb-serif: var(--font-sb) var(--font-size-3) / 1.5 var(--font-family-serif);
+  --body-4: var(--font-rg) var(--font-size-2) / 1.4 var(--font-family-sans);
+  --body-4-serif: var(--font-rg) var(--font-size-2) / 1.4 var(--font-family-serif);
+  --body-4-sb: var(--font-sb) var(--font-size-2) / 1.4 var(--font-family-sans);
+  --body-4-sb-serif: var(--font-sb) var(--font-size-2) / 1.4 var(--font-family-serif);
+  --body-5: var(--font-rg) var(--font-size-1) / 1.333 var(--font-family-sans);
+  --body-5-serif: var(--font-rg) var(--font-size-1) / 1.333 var(--font-family-serif);
+  --body-5-sb: var(--font-sb) var(--font-size-1) / 1.333 var(--font-family-sans);
+  --body-5-sb-serif: var(--font-sb) var(--font-size-1) / 1.333 var(--font-family-serif);
+  --interactive-1: var(--font-rg) var(--font-size-3) / 1.5 var(--font-family-sans);
+  --interactive-1-serif: var(--font-rg) var(--font-size-3) / 1.5 var(--font-family-serif);
+  --interactive-1-sb: var(--font-sb) var(--font-size-3) / 1.5 var(--font-family-sans);
+  --interactive-1-sb-serif: var(--font-sb) var(--font-size-3) / 1.5 var(--font-family-serif);
+  --interactive-2: var(--font-rg) var(--font-size-2) / 1.4 var(--font-family-sans);
+  --interactive-2-serif: var(--font-rg) var(--font-size-2) / 1.4 var(--font-family-serif);
+  --interactive-2-sb: var(--font-sb) var(--font-size-2) / 1.4 var(--font-family-sans);
+  --interactive-2-sb-serif: var(--font-sb) var(--font-size-2) / 1.4 var(--font-family-serif);
+  --interactive-3: var(--font-rg) var(--font-size-1) / 1.333 var(--font-family-sans);
+  --interactive-3-serif: var(--font-rg) var(--font-size-1) / 1.333 var(--font-family-serif);
+  --interactive-3-sb: var(--font-sb) var(--font-size-1) / 1.333 var(--font-family-sans);
+  --interactive-3-sb-serif: var(--font-sb) var(--font-size-1) / 1.333 var(--font-family-serif);
+  --helper: italic var(--font-rg) var(--font-size-1) / 1.333 var(--font-family-sans);
+  --helper-serif: italic var(--font-rg) var(--font-size-1) / 1.333 var(--font-family-serif);
+  --helper-sb: italic var(--font-sb) var(--font-size-1) / 1.333 var(--font-family-sans);
+  --helper-sb-serif: italic var(--font-sb) var(--font-size-1) / 1.333 var(--font-family-serif);
+}
+
+@media (min-width: 1152px) {
+  :root {
+    --heading-1: var(--font-rg) var(--font-size-8) / 1.25 var(--font-family-sans);
+    --heading-1-serif: var(--font-rg) var(--font-size-8) / 1.25 var(--font-family-serif);
+    --heading-1-sb: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-sans);
+    --heading-1-sb-serif: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);
+    --heading-1-lt: var(--font-lt) var(--font-size-8) / 1.25 var(--font-family-sans);
+    --heading-1-lt-serif: var(--font-lt) var(--font-size-8) / 1.25 var(--font-family-serif);
+    --heading-2: var(--font-rg) var(--font-size-7) / 1.28 var(--font-family-sans);
+    --heading-2-serif: var(--font-rg) var(--font-size-7) / 1.28 var(--font-family-serif);
+    --heading-2-sb: var(--font-sb) var(--font-size-7) / 1.28 var(--font-family-sans);
+    --heading-2-sb-serif: var(--font-sb) var(--font-size-7) / 1.28 var(--font-family-serif);
+    --heading-2-lt: var(--font-lt) var(--font-size-7) / 1.28 var(--font-family-sans);
+    --heading-2-lt-serif: var(--font-lt) var(--font-size-7) / 1.28 var(--font-family-serif);
+  }
 }
 
 /* Typography classes */
 .heading-1,
 .heading-1-sb,
-.heading-1-lt {
+.heading-1-lt,
+.heading-1-serif,
+.heading-1-sb-serif,
+.heading-1-lt-serif {
   font-size: var(--font-size-7);
   font-weight: var(--font-rg);
   line-height: 1.28;
@@ -187,7 +267,10 @@
 
 .heading-2,
 .heading-2-sb,
-.heading-2-lt {
+.heading-2-lt,
+.heading-2-serif,
+.heading-2-sb-serif,
+.heading-2-lt-serif {
   font-size: var(--font-size-6);
   font-weight: var(--font-rg);
   line-height: 1.333;
@@ -195,7 +278,10 @@
 
 .heading-3,
 .heading-3-sb,
-.heading-3-lt {
+.heading-3-lt,
+.heading-3-serif,
+.heading-3-sb-serif,
+.heading-3-lt-serif {
   font-size: var(--font-size-6);
   font-weight: var(--font-rg);
   line-height: 1.333;
@@ -203,35 +289,46 @@
 
 .heading-4,
 .heading-4-sb,
-.heading-4-lt {
+.heading-4-lt,
+.heading-4-serif,
+.heading-4-sb-serif,
+.heading-4-lt-serif {
   font-size: var(--font-size-5);
   font-weight: var(--font-rg);
   line-height: 1.4;
 }
 
 .body-1,
-.body-1-sb {
+.body-1-sb,
+.body-1-serif,
+.body-1-sb-serif {
   font-size: var(--font-size-5);
   font-weight: var(--font-rg);
   line-height: 1.4;
 }
 
 .body-2,
-.body-2-sb {
+.body-2-sb,
+.body-2-serif,
+.body-2-sb-serif {
   font-size: var(--font-size-4);
   font-weight: var(--font-rg);
   line-height: 1.5;
 }
 
 .body-3,
-.body-3-sb {
+.body-3-sb,
+.body-3-serif,
+.body-3-sb-serif {
   font-size: var(--font-size-3);
   font-weight: var(--font-rg);
   line-height: 1.5;
 }
 
 .body-4,
-.body-4-sb {
+.body-4-sb,
+.body-4-serif,
+.body-4-sb-serif {
   font-size: var(--font-size-2);
   font-weight: var(--font-rg);
   letter-spacing: 0.16px;
@@ -239,7 +336,9 @@
 }
 
 .body-5,
-.body-5-sb {
+.body-5-sb,
+.body-5-serif,
+.body-5-sb-serif {
   font-size: var(--font-size-1);
   font-weight: var(--font-rg);
   letter-spacing: 0.32px;
@@ -247,14 +346,18 @@
 }
 
 .interactive-1,
-.interactive-1-sb {
+.interactive-1-sb,
+.interactive-1-serif,
+.interactive-1-sb-serif {
   font-size: var(--font-size-3);
   font-weight: var(--font-rg);
   line-height: 1.5;
 }
 
 .interactive-2,
-.interactive-2-sb {
+.interactive-2-sb,
+.interactive-2-serif,
+.interactive-2-sb-serif {
   font-size: var(--font-size-2);
   font-weight: var(--font-rg);
   letter-spacing: 0.16px;
@@ -262,7 +365,9 @@
 }
 
 .interactive-3,
-.interactive-3-sb {
+.interactive-3-sb,
+.interactive-3-serif,
+.interactive-3-sb-serif {
   font-size: var(--font-size-1);
   font-weight: var(--font-rg);
   letter-spacing: 0.32px;
@@ -270,7 +375,9 @@
 }
 
 .helper,
-.helper-sb {
+.helper-sb,
+.helper-serif,
+.helper-sb-serif {
   font-size: var(--font-size-1);
   font-style: italic;
   font-weight: var(--font-rg);
@@ -307,7 +414,10 @@
 @media (min-width: 1152px) {
   .heading-1,
   .heading-1-sb,
-  .heading-1-lt {
+  .heading-1-lt,
+  .heading-1-serif,
+  .heading-1-sb-serif,
+  .heading-1-lt-serif {
     font-size: var(--font-size-8);
     font-weight: var(--font-rg);
     line-height: 1.25;
@@ -315,7 +425,10 @@
 
   .heading-2,
   .heading-2-sb,
-  .heading-2-lt {
+  .heading-2-lt,
+  .heading-2-serif,
+  .heading-2-sb-serif,
+  .heading-2-lt-serif {
     font-size: var(--font-size-7);
     font-weight: var(--font-rg);
     line-height: 1.28;
@@ -326,7 +439,10 @@
 @media (max-width: 767px) {
   .mobile-heading-1,
   .mobile-heading-1-sb,
-  .mobile-heading-1-lt {
+  .mobile-heading-1-lt,
+  .mobile-heading-1-serif,
+  .mobile-heading-1-sb-serif,
+  .mobile-heading-1-lt-serif {
     font-size: var(--font-size-7);
     font-weight: var(--font-rg);
     line-height: 1.28;
@@ -334,7 +450,10 @@
 
   .mobile-heading-2,
   .mobile-heading-2-sb,
-  .mobile-heading-2-lt {
+  .mobile-heading-2-lt,
+  .mobile-heading-2-serif,
+  .mobile-heading-2-sb-serif,
+  .mobile-heading-2-lt-serif {
     font-size: var(--font-size-6);
     font-weight: var(--font-rg);
     line-height: 1.333;
@@ -342,7 +461,10 @@
 
   .mobile-heading-3,
   .mobile-heading-3-sb,
-  .mobile-heading-3-lt {
+  .mobile-heading-3-lt,
+  .mobile-heading-3-serif,
+  .mobile-heading-3-sb-serif,
+  .mobile-heading-3-lt-serif {
     font-size: var(--font-size-6);
     font-weight: var(--font-rg);
     line-height: 1.333;
@@ -350,35 +472,46 @@
 
   .mobile-heading-4,
   .mobile-heading-4-sb,
-  .mobile-heading-4-lt {
+  .mobile-heading-4-lt,
+  .mobile-heading-4-serif,
+  .mobile-heading-4-sb-serif,
+  .mobile-heading-4-lt-serif {
     font-size: var(--font-size-5);
     font-weight: var(--font-rg);
     line-height: 1.4;
   }
 
   .mobile-body-1,
-  .mobile-body-1-sb {
+  .mobile-body-1-sb,
+  .mobile-body-1-serif,
+  .mobile-body-1-sb-serif {
     font-size: var(--font-size-5);
     font-weight: var(--font-rg);
     line-height: 1.4;
   }
 
   .mobile-body-2,
-  .mobile-body-2-sb {
+  .mobile-body-2-sb,
+  .mobile-body-2-serif,
+  .mobile-body-2-sb-serif {
     font-size: var(--font-size-4);
     font-weight: var(--font-rg);
     line-height: 1.5;
   }
 
   .mobile-body-3,
-  .mobile-body-3-sb {
+  .mobile-body-3-sb,
+  .mobile-body-3-serif,
+  .mobile-body-3-sb-serif {
     font-size: var(--font-size-3);
     font-weight: var(--font-rg);
     line-height: 1.5;
   }
 
   .mobile-body-4,
-  .mobile-body-4-sb {
+  .mobile-body-4-sb,
+  .mobile-body-4-serif,
+  .mobile-body-4-sb-serif {
     font-size: var(--font-size-2);
     font-weight: var(--font-rg);
     letter-spacing: 0.16px;
@@ -386,7 +519,9 @@
   }
 
   .mobile-body-5,
-  .mobile-body-5-sb {
+  .mobile-body-5-sb,
+  .mobile-body-5-serif,
+  .mobile-body-5-sb-serif {
     font-size: var(--font-size-1);
     font-weight: var(--font-rg);
     letter-spacing: 0.32px;
@@ -394,14 +529,18 @@
   }
 
   .mobile-interactive-1,
-  .mobile-interactive-1-sb {
+  .mobile-interactive-1-sb,
+  .mobile-interactive-1-serif,
+  .mobile-interactive-1-sb-serif {
     font-size: var(--font-size-3);
     font-weight: var(--font-rg);
     line-height: 1.5;
   }
 
   .mobile-interactive-2,
-  .mobile-interactive-2-sb {
+  .mobile-interactive-2-sb,
+  .mobile-interactive-2-serif,
+  .mobile-interactive-2-sb-serif {
     font-size: var(--font-size-2);
     font-weight: var(--font-rg);
     letter-spacing: 0.16px;
@@ -409,7 +548,9 @@
   }
 
   .mobile-interactive-3,
-  .mobile-interactive-3-sb {
+  .mobile-interactive-3-sb,
+  .mobile-interactive-3-serif,
+  .mobile-interactive-3-sb-serif {
     font-size: var(--font-size-1);
     font-weight: var(--font-rg);
     letter-spacing: 0.32px;
@@ -443,7 +584,11 @@
   .mobile-heading-1-lt,
   .mobile-heading-2-lt,
   .mobile-heading-3-lt,
-  .mobile-heading-4-lt {
+  .mobile-heading-4-lt,
+  .mobile-heading-1-lt-serif,
+  .mobile-heading-2-lt-serif,
+  .mobile-heading-3-lt-serif,
+  .mobile-heading-4-lt-serif {
     font-weight: var(--font-lt);
   }
 
@@ -458,15 +603,61 @@
   .mobile-body-5-sb,
   .mobile-interactive-1-sb,
   .mobile-interactive-2-sb,
-  .mobile-interactive-3-sb {
+  .mobile-interactive-3-sb,
+  .mobile-heading-1-sb-serif,
+  .mobile-heading-2-sb-serif,
+  .mobile-heading-3-sb-serif,
+  .mobile-heading-4-sb-serif,
+  .mobile-body-1-sb-serif,
+  .mobile-body-2-sb-serif,
+  .mobile-body-3-sb-serif,
+  .mobile-body-4-sb-serif,
+  .mobile-body-5-sb-serif,
+  .mobile-interactive-1-sb-serif,
+  .mobile-interactive-2-sb-serif,
+  .mobile-interactive-3-sb-serif {
     font-weight: var(--font-sb);
   }
+
+  .mobile-heading-1-serif,
+  .mobile-heading-1-sb-serif,
+  .mobile-heading-1-lt-serif,
+  .mobile-heading-2-serif,
+  .mobile-heading-2-sb-serif,
+  .mobile-heading-2-lt-serif,
+  .mobile-heading-3-serif,
+  .mobile-heading-3-sb-serif,
+  .mobile-heading-3-lt-serif,
+  .mobile-heading-4-serif,
+  .mobile-heading-4-sb-serif,
+  .mobile-heading-4-lt-serif,
+  .mobile-body-1-serif,
+  .mobile-body-1-sb-serif,
+  .mobile-body-2-serif,
+  .mobile-body-2-sb-serif,
+  .mobile-body-3-serif,
+  .mobile-body-3-sb-serif,
+  .mobile-body-4-serif,
+  .mobile-body-4-sb-serif,
+  .mobile-body-5-serif,
+  .mobile-body-5-sb-serif,
+  .mobile-interactive-1-serif,
+  .mobile-interactive-1-sb-serif,
+  .mobile-interactive-2-serif,
+  .mobile-interactive-2-sb-serif,
+  .mobile-interactive-3-serif,
+  .mobile-interactive-3-sb-serif {
+    font-family: var(--font-family-serif);
+  }
 }
 
 @media (min-width: 768px) and (max-width: 1151px) {
   .tablet-heading-1,
   .tablet-heading-1-sb,
-  .tablet-heading-1-lt {
+  .tablet-heading-1-lt,
+  .tablet-heading-1-serif,
+  .tablet-heading-1-sb-serif,
+  .tablet-heading-1-lt-serif {
     font-size: var(--font-size-7);
     font-weight: var(--font-rg);
     line-height: 1.28;
@@ -474,7 +665,10 @@
 
   .tablet-heading-2,
   .tablet-heading-2-sb,
-  .tablet-heading-2-lt {
+  .tablet-heading-2-lt,
+  .tablet-heading-2-serif,
+  .tablet-heading-2-sb-serif,
+  .tablet-heading-2-lt-serif {
     font-size: var(--font-size-6);
     font-weight: var(--font-rg);
     line-height: 1.333;
@@ -482,7 +676,10 @@
 
   .tablet-heading-3,
   .tablet-heading-3-sb,
-  .tablet-heading-3-lt {
+  .tablet-heading-3-lt,
+  .tablet-heading-3-serif,
+  .tablet-heading-3-sb-serif,
+  .tablet-heading-3-lt-serif {
     font-size: var(--font-size-6);
     font-weight: var(--font-rg);
     line-height: 1.333;
@@ -490,35 +687,46 @@
 
   .tablet-heading-4,
   .tablet-heading-4-sb,
-  .tablet-heading-4-lt {
+  .tablet-heading-4-lt,
+  .tablet-heading-4-serif,
+  .tablet-heading-4-sb-serif,
+  .tablet-heading-4-lt-serif {
     font-size: var(--font-size-5);
     font-weight: var(--font-rg);
     line-height: 1.4;
   }
 
   .tablet-body-1,
-  .tablet-body-1-sb {
+  .tablet-body-1-sb,
+  .tablet-body-1-serif,
+  .tablet-body-1-sb-serif {
     font-size: var(--font-size-5);
     font-weight: var(--font-rg);
     line-height: 1.4;
   }
 
   .tablet-body-2,
-  .tablet-body-2-sb {
+  .tablet-body-2-sb,
+  .tablet-body-2-serif,
+  .tablet-body-2-sb-serif {
     font-size: var(--font-size-4);
     font-weight: var(--font-rg);
     line-height: 1.5;
   }
 
   .tablet-body-3,
-  .tablet-body-3-sb {
+  .tablet-body-3-sb,
+  .tablet-body-3-serif,
+  .tablet-body-3-sb-serif {
     font-size: var(--font-size-3);
     font-weight: var(--font-rg);
     line-height: 1.5;
   }
 
   .tablet-body-4,
-  .tablet-body-4-sb {
+  .tablet-body-4-sb,
+  .tablet-body-4-serif,
+  .tablet-body-4-sb-serif {
     font-size: var(--font-size-2);
     font-weight: var(--font-rg);
     letter-spacing: 0.16px;
@@ -526,7 +734,9 @@
   }
 
   .tablet-body-5,
-  .tablet-body-5-sb {
+  .tablet-body-5-sb,
+  .tablet-body-5-serif,
+  .tablet-body-5-sb-serif {
     font-size: var(--font-size-1);
     font-weight: var(--font-rg);
     letter-spacing: 0.32px;
@@ -534,14 +744,18 @@
   }
 
   .tablet-interactive-1,
-  .tablet-interactive-1-sb {
+  .tablet-interactive-1-sb,
+  .tablet-interactive-1-serif,
+  .tablet-interactive-1-sb-serif {
     font-size: var(--font-size-3);
     font-weight: var(--font-rg);
     line-height: 1.5;
   }
 
   .tablet-interactive-2,
-  .tablet-interactive-2-sb {
+  .tablet-interactive-2-sb,
+  .tablet-interactive-2-serif,
+  .tablet-interactive-2-sb-serif {
     font-size: var(--font-size-2);
     font-weight: var(--font-rg);
     letter-spacing: 0.16px;
@@ -549,7 +763,9 @@
   }
 
   .tablet-interactive-3,
-  .tablet-interactive-3-sb {
+  .tablet-interactive-3-sb,
+  .tablet-interactive-3-serif,
+  .tablet-interactive-3-sb-serif {
     font-size: var(--font-size-1);
     font-weight: var(--font-rg);
     letter-spacing: 0.32px;
@@ -583,7 +799,11 @@
   .tablet-heading-1-lt,
   .tablet-heading-2-lt,
   .tablet-heading-3-lt,
-  .tablet-heading-4-lt {
+  .tablet-heading-4-lt,
+  .tablet-heading-1-lt-serif,
+  .tablet-heading-2-lt-serif,
+  .tablet-heading-3-lt-serif,
+  .tablet-heading-4-lt-serif {
     font-weight: var(--font-lt);
   }
 
@@ -598,15 +818,61 @@
   .tablet-body-5-sb,
   .tablet-interactive-1-sb,
   .tablet-interactive-2-sb,
-  .tablet-interactive-3-sb {
+  .tablet-interactive-3-sb,
+  .tablet-heading-1-sb-serif,
+  .tablet-heading-2-sb-serif,
+  .tablet-heading-3-sb-serif,
+  .tablet-heading-4-sb-serif,
+  .tablet-body-1-sb-serif,
+  .tablet-body-2-sb-serif,
+  .tablet-body-3-sb-serif,
+  .tablet-body-4-sb-serif,
+  .tablet-body-5-sb-serif,
+  .tablet-interactive-1-sb-serif,
+  .tablet-interactive-2-sb-serif,
+  .tablet-interactive-3-sb-serif {
     font-weight: var(--font-sb);
   }
+
+  .tablet-heading-1-serif,
+  .tablet-heading-1-sb-serif,
+  .tablet-heading-1-lt-serif,
+  .tablet-heading-2-serif,
+  .tablet-heading-2-sb-serif,
+  .tablet-heading-2-lt-serif,
+  .tablet-heading-3-serif,
+  .tablet-heading-3-sb-serif,
+  .tablet-heading-3-lt-serif,
+  .tablet-heading-4-serif,
+  .tablet-heading-4-sb-serif,
+  .tablet-heading-4-lt-serif,
+  .tablet-body-1-serif,
+  .tablet-body-1-sb-serif,
+  .tablet-body-2-serif,
+  .tablet-body-2-sb-serif,
+  .tablet-body-3-serif,
+  .tablet-body-3-sb-serif,
+  .tablet-body-4-serif,
+  .tablet-body-4-sb-serif,
+  .tablet-body-5-serif,
+  .tablet-body-5-sb-serif,
+  .tablet-interactive-1-serif,
+  .tablet-interactive-1-sb-serif,
+  .tablet-interactive-2-serif,
+  .tablet-interactive-2-sb-serif,
+  .tablet-interactive-3-serif,
+  .tablet-interactive-3-sb-serif {
+    font-family: var(--font-family-serif);
+  }
 }
 
 @media (min-width: 1152px) and (max-width: 1365px) {
   .desktop-heading-1,
   .desktop-heading-1-sb,
-  .desktop-heading-1-lt {
+  .desktop-heading-1-lt,
+  .desktop-heading-1-serif,
+  .desktop-heading-1-sb-serif,
+  .desktop-heading-1-lt-serif {
     font-size: var(--font-size-8);
     font-weight: var(--font-rg);
     line-height: 1.25;
@@ -614,7 +880,10 @@
 
   .desktop-heading-2,
   .desktop-heading-2-sb,
-  .desktop-heading-2-lt {
+  .desktop-heading-2-lt,
+  .desktop-heading-2-serif,
+  .desktop-heading-2-sb-serif,
+  .desktop-heading-2-lt-serif {
     font-size: var(--font-size-7);
     font-weight: var(--font-rg);
     line-height: 1.28;
@@ -622,7 +891,10 @@
 
   .desktop-heading-3,
   .desktop-heading-3-sb,
-  .desktop-heading-3-lt {
+  .desktop-heading-3-lt,
+  .desktop-heading-3-serif,
+  .desktop-heading-3-sb-serif,
+  .desktop-heading-3-lt-serif {
     font-size: var(--font-size-6);
     font-weight: var(--font-rg);
     line-height: 1.333;
@@ -630,35 +902,46 @@
 
   .desktop-heading-4,
   .desktop-heading-4-sb,
-  .desktop-heading-4-lt {
+  .desktop-heading-4-lt,
+  .desktop-heading-4-serif,
+  .desktop-heading-4-sb-serif,
+  .desktop-heading-4-lt-serif {
     font-size: var(--font-size-5);
     font-weight: var(--font-rg);
     line-height: 1.4;
   }
 
   .desktop-body-1,
-  .desktop-body-1-sb {
+  .desktop-body-1-sb,
+  .desktop-body-1-serif,
+  .desktop-body-1-sb-serif {
     font-size: var(--font-size-5);
     font-weight: var(--font-rg);
     line-height: 1.4;
   }
 
   .desktop-body-2,
-  .desktop-body-2-sb {
+  .desktop-body-2-sb,
+  .desktop-body-2-serif,
+  .desktop-body-2-sb-serif {
     font-size: var(--font-size-4);
     font-weight: var(--font-rg);
     line-height: 1.5;
   }
 
   .desktop-body-3,
-  .desktop-body-3-sb {
+  .desktop-body-3-sb,
+  .desktop-body-3-serif,
+  .desktop-body-3-sb-serif {
     font-size: var(--font-size-3);
     font-weight: var(--font-rg);
     line-height: 1.5;
   }
 
   .desktop-body-4,
-  .desktop-body-4-sb {
+  .desktop-body-4-sb,
+  .desktop-body-4-serif,
+  .desktop-body-4-sb-serif {
     font-size: var(--font-size-2);
     font-weight: var(--font-rg);
     letter-spacing: 0.16px;
@@ -666,7 +949,9 @@
   }
 
   .desktop-body-5,
-  .desktop-body-5-sb {
+  .desktop-body-5-sb,
+  .desktop-body-5-serif,
+  .desktop-body-5-sb-serif {
     font-size: var(--font-size-1);
     font-weight: var(--font-rg);
     letter-spacing: 0.32px;
@@ -674,14 +959,18 @@
   }
 
   .desktop-interactive-1,
-  .desktop-interactive-1-sb {
+  .desktop-interactive-1-sb,
+  .desktop-interactive-1-serif,
+  .desktop-interactive-1-sb-serif {
     font-size: var(--font-size-3);
     font-weight: var(--font-rg);
     line-height: 1.5;
   }
 
   .desktop-interactive-2,
-  .desktop-interactive-2-sb {
+  .desktop-interactive-2-sb,
+  .desktop-interactive-2-serif,
+  .desktop-interactive-2-sb-serif {
     font-size: var(--font-size-2);
     font-weight: var(--font-rg);
     letter-spacing: 0.16px;
@@ -689,7 +978,9 @@
   }
 
   .desktop-interactive-3,
-  .desktop-interactive-3-sb {
+  .desktop-interactive-3-sb,
+  .desktop-interactive-3-serif,
+  .desktop-interactive-3-sb-serif {
     font-size: var(--font-size-1);
     font-weight: var(--font-rg);
     letter-spacing: 0.32px;
@@ -723,7 +1014,11 @@
   .desktop-heading-1-lt,
   .desktop-heading-2-lt,
   .desktop-heading-3-lt,
-  .desktop-heading-4-lt {
+  .desktop-heading-4-lt,
+  .desktop-heading-1-lt-serif,
+  .desktop-heading-2-lt-serif,
+  .desktop-heading-3-lt-serif,
+  .desktop-heading-4-lt-serif {
     font-weight: var(--font-lt);
   }
 
@@ -738,15 +1033,61 @@
   .desktop-body-5-sb,
   .desktop-interactive-1-sb,
   .desktop-interactive-2-sb,
-  .desktop-interactive-3-sb {
+  .desktop-interactive-3-sb,
+  .desktop-heading-1-sb-serif,
+  .desktop-heading-2-sb-serif,
+  .desktop-heading-3-sb-serif,
+  .desktop-heading-4-sb-serif,
+  .desktop-body-1-sb-serif,
+  .desktop-body-2-sb-serif,
+  .desktop-body-3-sb-serif,
+  .desktop-body-4-sb-serif,
+  .desktop-body-5-sb-serif,
+  .desktop-interactive-1-sb-serif,
+  .desktop-interactive-2-sb-serif,
+  .desktop-interactive-3-sb-serif {
     font-weight: var(--font-sb);
   }
+
+  .desktop-heading-1-serif,
+  .desktop-heading-1-sb-serif,
+  .desktop-heading-1-lt-serif,
+  .desktop-heading-2-serif,
+  .desktop-heading-2-sb-serif,
+  .desktop-heading-2-lt-serif,
+  .desktop-heading-3-serif,
+  .desktop-heading-3-sb-serif,
+  .desktop-heading-3-lt-serif,
+  .desktop-heading-4-serif,
+  .desktop-heading-4-sb-serif,
+  .desktop-heading-4-lt-serif,
+  .desktop-body-1-serif,
+  .desktop-body-1-sb-serif,
+  .desktop-body-2-serif,
+  .desktop-body-2-sb-serif,
+  .desktop-body-3-serif,
+  .desktop-body-3-sb-serif,
+  .desktop-body-4-serif,
+  .desktop-body-4-sb-serif,
+  .desktop-body-5-serif,
+  .desktop-body-5-sb-serif,
+  .desktop-interactive-1-serif,
+  .desktop-interactive-1-sb-serif,
+  .desktop-interactive-2-serif,
+  .desktop-interactive-2-sb-serif,
+  .desktop-interactive-3-serif,
+  .desktop-interactive-3-sb-serif {
+    font-family: var(--font-family-serif);
+  }
 }
 
 @media (min-width: 1366px) {
   .wide-heading-1,
   .wide-heading-1-sb,
-  .wide-heading-1-lt {
+  .wide-heading-1-lt,
+  .wide-heading-1-serif,
+  .wide-heading-1-sb-serif,
+  .wide-heading-1-lt-serif {
     font-size: var(--font-size-8);
     font-weight: var(--font-rg);
     line-height: 1.25;
@@ -754,7 +1095,10 @@
 
   .wide-heading-2,
   .wide-heading-2-sb,
-  .wide-heading-2-lt {
+  .wide-heading-2-lt,
+  .wide-heading-2-serif,
+  .wide-heading-2-sb-serif,
+  .wide-heading-2-lt-serif {
     font-size: var(--font-size-7);
     font-weight: var(--font-rg);
     line-height: 1.28;
@@ -762,7 +1106,10 @@
 
   .wide-heading-3,
   .wide-heading-3-sb,
-  .wide-heading-3-lt {
+  .wide-heading-3-lt,
+  .wide-heading-3-serif,
+  .wide-heading-3-sb-serif,
+  .wide-heading-3-lt-serif {
     font-size: var(--font-size-6);
     font-weight: var(--font-rg);
     line-height: 1.333;
@@ -770,35 +1117,46 @@
 
   .wide-heading-4,
   .wide-heading-4-sb,
-  .wide-heading-4-lt {
+  .wide-heading-4-lt,
+  .wide-heading-4-serif,
+  .wide-heading-4-sb-serif,
+  .wide-heading-4-lt-serif {
     font-size: var(--font-size-5);
     font-weight: var(--font-rg);
     line-height: 1.4;
   }
 
   .wide-body-1,
-  .wide-body-1-sb {
+  .wide-body-1-sb,
+  .wide-body-1-serif,
+  .wide-body-1-sb-serif {
     font-size: var(--font-size-5);
     font-weight: var(--font-rg);
     line-height: 1.4;
   }
 
   .wide-body-2,
-  .wide-body-2-sb {
+  .wide-body-2-sb,
+  .wide-body-2-serif,
+  .wide-body-2-sb-serif {
     font-size: var(--font-size-4);
     font-weight: var(--font-rg);
     line-height: 1.5;
   }
 
   .wide-body-3,
-  .wide-body-3-sb {
+  .wide-body-3-sb,
+  .wide-body-3-serif,
+  .wide-body-3-sb-serif {
     font-size: var(--font-size-3);
     font-weight: var(--font-rg);
     line-height: 1.5;
   }
 
   .wide-body-4,
-  .wide-body-4-sb {
+  .wide-body-4-sb,
+  .wide-body-4-serif,
+  .wide-body-4-sb-serif {
     font-size: var(--font-size-2);
     font-weight: var(--font-rg);
     letter-spacing: 0.16px;
@@ -806,7 +1164,9 @@
   }
 
   .wide-body-5,
-  .wide-body-5-sb {
+  .wide-body-5-sb,
+  .wide-body-5-serif,
+  .wide-body-5-sb-serif {
     font-size: var(--font-size-1);
     font-weight: var(--font-rg);
     letter-spacing: 0.32px;
@@ -814,14 +1174,18 @@
   }
 
   .wide-interactive-1,
-  .wide-interactive-1-sb {
+  .wide-interactive-1-sb,
+  .wide-interactive-1-serif,
+  .wide-interactive-1-sb-serif {
     font-size: var(--font-size-3);
     font-weight: var(--font-rg);
     line-height: 1.5;
   }
 
   .wide-interactive-2,
-  .wide-interactive-2-sb {
+  .wide-interactive-2-sb,
+  .wide-interactive-2-serif,
+  .wide-interactive-2-sb-serif {
     font-size: var(--font-size-2);
     font-weight: var(--font-rg);
     letter-spacing: 0.16px;
@@ -829,7 +1193,9 @@
   }
 
   .wide-interactive-3,
-  .wide-interactive-3-sb {
+  .wide-interactive-3-sb,
+  .wide-interactive-3-serif,
+  .wide-interactive-3-sb-serif {
     font-size: var(--font-size-1);
     font-weight: var(--font-rg);
     letter-spacing: 0.32px;
@@ -863,7 +1229,11 @@
   .wide-heading-1-lt,
   .wide-heading-2-lt,
   .wide-heading-3-lt,
-  .wide-heading-4-lt {
+  .wide-heading-4-lt,
+  .wide-heading-1-lt-serif,
+  .wide-heading-2-lt-serif,
+  .wide-heading-3-lt-serif,
+  .wide-heading-4-lt-serif {
     font-weight: var(--font-lt);
   }
 
@@ -878,16 +1248,62 @@
   .wide-body-5-sb,
   .wide-interactive-1-sb,
   .wide-interactive-2-sb,
-  .wide-interactive-3-sb {
+  .wide-interactive-3-sb,
+  .wide-heading-1-sb-serif,
+  .wide-heading-2-sb-serif,
+  .wide-heading-3-sb-serif,
+  .wide-heading-4-sb-serif,
+  .wide-body-1-sb-serif,
+  .wide-body-2-sb-serif,
+  .wide-body-3-sb-serif,
+  .wide-body-4-sb-serif,
+  .wide-body-5-sb-serif,
+  .wide-interactive-1-sb-serif,
+  .wide-interactive-2-sb-serif,
+  .wide-interactive-3-sb-serif {
     font-weight: var(--font-sb);
   }
+
+  .wide-heading-1-serif,
+  .wide-heading-1-sb-serif,
+  .wide-heading-1-lt-serif,
+  .wide-heading-2-serif,
+  .wide-heading-2-sb-serif,
+  .wide-heading-2-lt-serif,
+  .wide-heading-3-serif,
+  .wide-heading-3-sb-serif,
+  .wide-heading-3-lt-serif,
+  .wide-heading-4-serif,
+  .wide-heading-4-sb-serif,
+  .wide-heading-4-lt-serif,
+  .wide-body-1-serif,
+  .wide-body-1-sb-serif,
+  .wide-body-2-serif,
+  .wide-body-2-sb-serif,
+  .wide-body-3-serif,
+  .wide-body-3-sb-serif,
+  .wide-body-4-serif,
+  .wide-body-4-sb-serif,
+  .wide-body-5-serif,
+  .wide-body-5-sb-serif,
+  .wide-interactive-1-serif,
+  .wide-interactive-1-sb-serif,
+  .wide-interactive-2-serif,
+  .wide-interactive-2-sb-serif,
+  .wide-interactive-3-serif,
+  .wide-interactive-3-sb-serif {
+    font-family: var(--font-family-serif);
+  }
 }
 
-/* font-weight variants */
 .heading-1-lt,
 .heading-2-lt,
 .heading-3-lt,
-.heading-4-lt {
+.heading-4-lt,
+.heading-1-lt-serif,
+.heading-2-lt-serif,
+.heading-3-lt-serif,
+.heading-4-lt-serif {
   font-weight: var(--font-lt);
 }
 
@@ -903,12 +1319,610 @@
 .interactive-1-sb,
 .interactive-2-sb,
 .interactive-3-sb,
-.helper-sb {
+.helper-sb,
+.heading-1-sb-serif,
+.heading-2-sb-serif,
+.heading-3-sb-serif,
+.heading-4-sb-serif,
+.body-1-sb-serif,
+.body-2-sb-serif,
+.body-3-sb-serif,
+.body-4-sb-serif,
+.body-5-sb-serif,
+.interactive-1-sb-serif,
+.interactive-2-sb-serif,
+.interactive-3-sb-serif,
+.helper-sb-serif {
   font-weight: var(--font-sb);
 }
 
+.heading-1-serif,
+.heading-1-sb-serif,
+.heading-1-lt-serif,
+.heading-2-serif,
+.heading-2-sb-serif,
+.heading-2-lt-serif,
+.heading-3-serif,
+.heading-3-sb-serif,
+.heading-3-lt-serif,
+.heading-4-serif,
+.heading-4-sb-serif,
+.heading-4-lt-serif,
+.body-1-serif,
+.body-1-sb-serif,
+.body-2-serif,
+.body-2-sb-serif,
+.body-3-serif,
+.body-3-sb-serif,
+.body-4-serif,
+.body-4-sb-serif,
+.body-5-serif,
+.body-5-sb-serif,
+.interactive-1-serif,
+.interactive-1-sb-serif,
+.interactive-2-serif,
+.interactive-2-sb-serif,
+.interactive-3-serif,
+.interactive-3-sb-serif,
+.helper-serif,
+.helper-sb-serif {
+  font-family: var(--font-family-serif);
+}
+
 :root {
   --space-unit: 8px;
+  --space-unit-1: var(--space-unit);
+  --space-unit-2: calc(var(--space-unit) * 2);
+  --space-unit-3: calc(var(--space-unit) * 3);
+  --space-unit-4: calc(var(--space-unit) * 4);
+  --space-unit-5: calc(var(--space-unit) * 5);
+  --space-unit-6: calc(var(--space-unit) * 6);
+  --space-unit-7: calc(var(--space-unit) * 7);
+  --space-unit-8: calc(var(--space-unit) * 8);
+}
+
+/* Margin classes */
+
+.z-m-0 {
+  margin: 0;
+}
+
+.z-m-1 {
+  margin: var(--space-unit-1);
+}
+
+.z-m-2 {
+  margin: var(--space-unit-2);
+}
+
+.z-m-3 {
+  margin: var(--space-unit-3);
+}
+
+.z-m-4 {
+  margin: var(--space-unit-4);
+}
+
+.z-m-5 {
+  margin: var(--space-unit-5);
+}
+
+.z-m-6 {
+  margin: var(--space-unit-6);
+}
+
+.z-m-7 {
+  margin: var(--space-unit-7);
+}
+
+.z-m-8 {
+  margin: var(--space-unit-8);
+}
+
+.z-mx-0 {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.z-my-0 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.z-mx-1 {
+  margin-right: var(--space-unit-1);
+  margin-left: var(--space-unit-1);
+}
+
+.z-my-1 {
+  margin-top: var(--space-unit-1);
+  margin-bottom: var(--space-unit-1);
+}
+
+.z-mx-2 {
+  margin-right: var(--space-unit-2);
+  margin-left: var(--space-unit-2);
+}
+
+.z-my-2 {
+  margin-top: var(--space-unit-2);
+  margin-bottom: var(--space-unit-2);
+}
+
+.z-mx-3 {
+  margin-right: var(--space-unit-3);
+  margin-left: var(--space-unit-3);
+}
+
+.z-my-3 {
+  margin-top: var(--space-unit-3);
+  margin-bottom: var(--space-unit-3);
+}
+
+.z-mx-4 {
+  margin-right: var(--space-unit-4);
+  margin-left: var(--space-unit-4);
+}
+
+.z-my-4 {
+  margin-top: var(--space-unit-4);
+  margin-bottom: var(--space-unit-4);
+}
+
+.z-mx-5 {
+  margin-right: var(--space-unit-5);
+  margin-left: var(--space-unit-5);
+}
+
+.z-my-5 {
+  margin-top: var(--space-unit-5);
+  margin-bottom: var(--space-unit-5);
+}
+
+.z-mx-6 {
+  margin-right: var(--space-unit-6);
+  margin-left: var(--space-unit-6);
+}
+
+.z-my-6 {
+  margin-top: var(--space-unit-6);
+  margin-bottom: var(--space-unit-6);
+}
+
+.z-mx-7 {
+  margin-right: var(--space-unit-7);
+  margin-left: var(--space-unit-7);
+}
+
+.z-my-7 {
+  margin-top: var(--space-unit-7);
+  margin-bottom: var(--space-unit-7);
+}
+
+.z-mx-8 {
+  margin-right: var(--space-unit-8);
+  margin-left: var(--space-unit-8);
+}
+
+.z-my-8 {
+  margin-top: var(--space-unit-8);
+  margin-bottom: var(--space-unit-8);
+}
+
+.z-mt-0 {
+  margin-top: 0;
+}
+
+.z-mr-0 {
+  margin-right: 0;
+}
+
+.z-mb-0 {
+  margin-bottom: 0;
+}
+
+.z-ml-0 {
+  margin-left: 0;
+}
+
+.z-mt-1 {
+  margin-top: var(--space-unit-1);
+}
+
+.z-mr-1 {
+  margin-right: var(--space-unit-1);
+}
+
+.z-mb-1 {
+  margin-bottom: var(--space-unit-1);
+}
+
+.z-ml-1 {
+  margin-left: var(--space-unit-1);
+}
+
+.z-mt-2 {
+  margin-top: var(--space-unit-2);
+}
+
+.z-mr-2 {
+  margin-right: var(--space-unit-2);
+}
+
+.z-mb-2 {
+  margin-bottom: var(--space-unit-2);
+}
+
+.z-ml-2 {
+  margin-left: var(--space-unit-2);
+}
+
+.z-mt-3 {
+  margin-top: var(--space-unit-3);
+}
+
+.z-mr-3 {
+  margin-right: var(--space-unit-3);
+}
+
+.z-mb-3 {
+  margin-bottom: var(--space-unit-3);
+}
+
+.z-ml-3 {
+  margin-left: var(--space-unit-3);
+}
+
+.z-mt-4 {
+  margin-top: var(--space-unit-4);
+}
+
+.z-mr-4 {
+  margin-right: var(--space-unit-4);
+}
+
+.z-mb-4 {
+  margin-bottom: var(--space-unit-4);
+}
+
+.z-ml-4 {
+  margin-left: var(--space-unit-4);
+}
+
+.z-mt-5 {
+  margin-top: var(--space-unit-5);
+}
+
+.z-mr-5 {
+  margin-right: var(--space-unit-5);
+}
+
+.z-mb-5 {
+  margin-bottom: var(--space-unit-5);
+}
+
+.z-ml-5 {
+  margin-left: var(--space-unit-5);
+}
+
+.z-mt-6 {
+  margin-top: var(--space-unit-6);
+}
+
+.z-mr-6 {
+  margin-right: var(--space-unit-6);
+}
+
+.z-mb-6 {
+  margin-bottom: var(--space-unit-6);
+}
+
+.z-ml-6 {
+  margin-left: var(--space-unit-6);
+}
+
+.z-mt-7 {
+  margin-top: var(--space-unit-7);
+}
+
+.z-mr-7 {
+  margin-right: var(--space-unit-7);
+}
+
+.z-mb-7 {
+  margin-bottom: var(--space-unit-7);
+}
+
+.z-ml-7 {
+  margin-left: var(--space-unit-7);
+}
+
+.z-mt-8 {
+  margin-top: var(--space-unit-8);
+}
+
+.z-mr-8 {
+  margin-right: var(--space-unit-8);
+}
+
+.z-mb-8 {
+  margin-bottom: var(--space-unit-8);
+}
+
+.z-ml-8 {
+  margin-left: var(--space-unit-8);
+}
+
+/* Padding classes */
+
+.z-p-0 {
+  padding: 0;
+}
+
+.z-p-1 {
+  padding: var(--space-unit-1);
+}
+
+.z-p-2 {
+  padding: var(--space-unit-2);
+}
+
+.z-p-3 {
+  padding: var(--space-unit-3);
+}
+
+.z-p-4 {
+  padding: var(--space-unit-4);
+}
+
+.z-p-5 {
+  padding: var(--space-unit-5);
+}
+
+.z-p-6 {
+  padding: var(--space-unit-6);
+}
+
+.z-p-7 {
+  padding: var(--space-unit-7);
+}
+
+.z-p-8 {
+  padding: var(--space-unit-8);
+}
+
+.z-px-0 {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.z-py-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.z-px-1 {
+  padding-right: var(--space-unit-1);
+  padding-left: var(--space-unit-1);
+}
+
+.z-py-1 {
+  padding-top: var(--space-unit-1);
+  padding-bottom: var(--space-unit-1);
+}
+
+.z-px-2 {
+  padding-right: var(--space-unit-2);
+  padding-left: var(--space-unit-2);
+}
+
+.z-py-2 {
+  padding-top: var(--space-unit-2);
+  padding-bottom: var(--space-unit-2);
+}
+
+.z-px-3 {
+  padding-right: var(--space-unit-3);
+  padding-left: var(--space-unit-3);
+}
+
+.z-py-3 {
+  padding-top: var(--space-unit-3);
+  padding-bottom: var(--space-unit-3);
+}
+
+.z-px-4 {
+  padding-right: var(--space-unit-4);
+  padding-left: var(--space-unit-4);
+}
+
+.z-py-4 {
+  padding-top: var(--space-unit-4);
+  padding-bottom: var(--space-unit-4);
+}
+
+.z-px-5 {
+  padding-right: var(--space-unit-5);
+  padding-left: var(--space-unit-5);
+}
+
+.z-py-5 {
+  padding-top: var(--space-unit-5);
+  padding-bottom: var(--space-unit-5);
+}
+
+.z-px-6 {
+  padding-right: var(--space-unit-6);
+  padding-left: var(--space-unit-6);
+}
+
+.z-py-6 {
+  padding-top: var(--space-unit-6);
+  padding-bottom: var(--space-unit-6);
+}
+
+.z-px-7 {
+  padding-right: var(--space-unit-7);
+  padding-left: var(--space-unit-7);
+}
+
+.z-py-7 {
+  padding-top: var(--space-unit-7);
+  padding-bottom: var(--space-unit-7);
+}
+
+.z-px-8 {
+  padding-right: var(--space-unit-8);
+  padding-left: var(--space-unit-8);
+}
+
+.z-py-8 {
+  padding-top: var(--space-unit-8);
+  padding-bottom: var(--space-unit-8);
+}
+
+.z-pt-0 {
+  padding-top: 0;
+}
+
+.z-pr-0 {
+  padding-right: 0;
+}
+
+.z-pb-0 {
+  padding-bottom: 0;
+}
+
+.z-pl-0 {
+  padding-left: 0;
+}
+
+.z-pt-1 {
+  padding-top: var(--space-unit-1);
+}
+
+.z-pr-1 {
+  padding-right: var(--space-unit-1);
+}
+
+.z-pb-1 {
+  padding-bottom: var(--space-unit-1);
+}
+
+.z-pl-1 {
+  padding-left: var(--space-unit-1);
+}
+
+.z-pt-2 {
+  padding-top: var(--space-unit-2);
+}
+
+.z-pr-2 {
+  padding-right: var(--space-unit-2);
+}
+
+.z-pb-2 {
+  padding-bottom: var(--space-unit-2);
+}
+
+.z-pl-2 {
+  padding-left: var(--space-unit-2);
+}
+
+.z-pt-3 {
+  padding-top: var(--space-unit-3);
+}
+
+.z-pr-3 {
+  padding-right: var(--space-unit-3);
+}
+
+.z-pb-3 {
+  padding-bottom: var(--space-unit-3);
+}
+
+.z-pl-3 {
+  padding-left: var(--space-unit-3);
+}
+
+.z-pt-4 {
+  padding-top: var(--space-unit-4);
+}
+
+.z-pr-4 {
+  padding-right: var(--space-unit-4);
+}
+
+.z-pb-4 {
+  padding-bottom: var(--space-unit-4);
+}
+
+.z-pl-4 {
+  padding-left: var(--space-unit-4);
+}
+
+.z-pt-5 {
+  padding-top: var(--space-unit-5);
+}
+
+.z-pr-5 {
+  padding-right: var(--space-unit-5);
+}
+
+.z-pb-5 {
+  padding-bottom: var(--space-unit-5);
+}
+
+.z-pl-5 {
+  padding-left: var(--space-unit-5);
+}
+
+.z-pt-6 {
+  padding-top: var(--space-unit-6);
+}
+
+.z-pr-6 {
+  padding-right: var(--space-unit-6);
+}
+
+.z-pb-6 {
+  padding-bottom: var(--space-unit-6);
+}
+
+.z-pl-6 {
+  padding-left: var(--space-unit-6);
+}
+
+.z-pt-7 {
+  padding-top: var(--space-unit-7);
+}
+
+.z-pr-7 {
+  padding-right: var(--space-unit-7);
+}
+
+.z-pb-7 {
+  padding-bottom: var(--space-unit-7);
+}
+
+.z-pl-7 {
+  padding-left: var(--space-unit-7);
+}
+
+.z-pt-8 {
+  padding-top: var(--space-unit-8);
+}
+
+.z-pr-8 {
+  padding-right: var(--space-unit-8);
+}
+
+.z-pb-8 {
+  padding-bottom: var(--space-unit-8);
+}
+
+.z-pl-8 {
+  padding-left: var(--space-unit-8);
 }
 
 :root {
@@ -2111,13 +3125,17 @@ a.z-fab {
 }
 
 .z-label {
-  display: block;
-  padding-bottom: var(--space-unit);
+  display: inline-block;
+  padding-bottom: calc(var(--space-unit) / 2);
   color: var(--color-default-text);
   font-family: var(--font-family-sans);
-  font-size: var(--font-size-1);
+  font-size: var(--font-size-2);
   font-weight: var(--font-sb);
+  line-height: 1.25rem;
   text-align: left;
+}
+
+.z-label::first-letter {
   text-transform: uppercase;
 }
 
@@ -2291,19 +3309,37 @@ button.z-link.z-link-inverse:visited {
 }
 
 /* Webkit Scrollbar */
+.z-scrollbar {
+  --z-scrollbar-track-gradient: linear-gradient(
+    to right,
+    transparent 0 1px,
+    var(--gray200) 1px 5px,
+    transparent 5px 6px
+  );
+  --z-scrollbar-track-color: var(--gray200);
+  --z-scrollbar-thumb-color: var(--color-primary01);
+  --z-scrollbar-thumb-hover-color: var(--color-hover-primary);
+  --z-scrollbar-corner-color: transparent;
+}
+
 .z-scrollbar::-webkit-scrollbar {
   width: 6px;
-  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);
+  background: var(--z-scrollbar-track-gradient);
 }
 
 .z-scrollbar::-webkit-scrollbar-thumb {
-  background-color: var(--color-primary01);
+  background-color: var(--z-scrollbar-thumb-color);
 }
 
 .z-scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-hover-primary);
+  background-color: var(--z-scrollbar-thumb-hover-color);
+}
+
+.z-scrollbar::-webkit-scrollbar-corner {
+  background-color: var(--z-scrollbar-corner-color);
 }
 
+/* Dark theme */
 :host([theme="dark"]) .z-scrollbar,
 .z-scrollbar--dark {
   --z-scrollbar-track-gradient: linear-gradient(
@@ -2313,21 +3349,43 @@ button.z-link.z-link-inverse:visited {
     transparent 5px 6px
   );
   --z-scrollbar-track-color: var(--gray600);
-  --z-scrollbar-thumb-color: var(--color-primary03);
-  --z-scrollbar-thumb-hover-color: var(--color-hover-primary);
+  --z-scrollbar-thumb-color: var(--color-white);
+  --z-scrollbar-thumb-hover-color: var(--gray500);
+  --z-scrollbar-corner-color: transparent;
+}
+
+/* Red theme */
+.theme-red .z-scrollbar {
+  --z-scrollbar-track-gradient: linear-gradient(
+    to right,
+    transparent 0 1px,
+    var(--gray200) 1px 5px,
+    transparent 5px 6px
+  );
+  --z-scrollbar-track-color: var(--gray200);
+  --z-scrollbar-thumb-color: var(--red500);
+  --z-scrollbar-thumb-hover-color: var(--red700);
   --z-scrollbar-corner-color: transparent;
 }
 
-/* Firefox scrollbar */
+.theme-black.theme-black--red .z-scrollbar,
+.theme-black.theme-black--yellow .z-scrollbar {
+  --z-scrollbar-track-gradient: linear-gradient(
+    to right,
+    transparent 0 1px,
+    var(--gray200) 1px 5px,
+    transparent 5px 6px
+  );
+  --z-scrollbar-track-color: var(--gray200);
+  --z-scrollbar-thumb-color: var(--gray950);
+  --z-scrollbar-thumb-hover-color: var(--gray900);
+  --z-scrollbar-corner-color: transparent;
+}
+
+/* Firefox Scrollbar */
 @supports not selector(.z-scrollbar::-webkit-scrollbar-track) {
   .z-scrollbar {
-    scrollbar-color: var(--color-primary01) transparent;
-  }
-
-  :host([theme="dark"]) .z-scrollbar,
-  .z-scrollbar--dark {
-    scrollbar-color: var(--z-scrollbar-thumb-color, var(--color-primary03))
-      var(--z-scrollbar-track-color, var(--gray600));
+    scrollbar-color: var(--z-scrollbar-thumb-color) var(--z-scrollbar-track-color);
   }
 }