@solid-design-system/styles 1.3.2 → 1.3.3

package/dist-versioned/modules/prose.css

@@ -1,22 +1,22 @@
 /**
  * Prose
- * @name sd-1-3-2-prose
+ * @name sd-1-3-3-prose
  * @status stable
  * @since 3.6.0
- * @boolean sd-1-3-2-prose--inverted Inverts the content, but not tables.
- * @boolean sd-1-3-2-prose--full-width Overrides the 80ch max-width and makes the prose full width.
+ * @boolean sd-1-3-3-prose--inverted Inverts the content, but not tables.
+ * @boolean sd-1-3-3-prose--full-width Overrides the 80ch max-width and makes the prose full width.
  */
 
 /**
  * Display provides larger text sizes that are not used as headlines. The different sizes allow for a more versatile styling of text elements. Display text should not be used as substitute for headlines.
- * @name sd-1-3-2-display
+ * @name sd-1-3-3-display
  * @status stable
  * @since 1.7
- * @variant { xl | 3xl } sd-1-3-2-display--size-... The display's size.
- * @boolean sd-1-3-2-display--inverted Inverts the display text.
+ * @variant { xl | 3xl } sd-1-3-3-display--size-... The display's size.
+ * @boolean sd-1-3-3-display--inverted Inverts the display text.
  */
 
-.sd-1-3-2-display {
+.sd-1-3-3-display {
   font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
   font-weight: 400;
   line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
@@ -26,12 +26,12 @@
 
 @media (min-width: 1024px) {
 
-  .sd-1-3-2-display {
+  .sd-1-3-3-display {
     font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */;
   }
 }
 
-.sd-1-3-2-display--size-xl {
+.sd-1-3-3-display--size-xl {
   font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
   font-weight: 400;
   line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
@@ -39,7 +39,7 @@
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-3-2-display--size-3xl {
+.sd-1-3-3-display--size-3xl {
   font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
   font-weight: 400;
   line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
@@ -49,35 +49,35 @@
 
 @media (min-width: 1024px) {
 
-  .sd-1-3-2-display--size-3xl {
+  .sd-1-3-3-display--size-3xl {
     font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
   }
 }
 
-.sd-1-3-2-display--inverted {
+.sd-1-3-3-display--inverted {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
 /**
  * Headlines are vital for displaying content hierarchy and to improve accessibility. A headline can be additionally accompanied by an icon. The icon can be displayed on the left side or inline.
- * @name sd-1-3-2-headline
+ * @name sd-1-3-3-headline
  * @status stable
  * @since 1.16
- * @variant { 3xl | xl | lg | base } sd-1-3-2-headline--size-... The headline's size.
- * @boolean sd-1-3-2-headline--inverted Inverts the headline text.
- * @boolean sd-1-3-2-headline--inline Sets inline behavior. Used exclusively when an sd-icon or other component is present. See usage <a href="#inline">here.</a>
+ * @variant { 3xl | xl | lg | base } sd-1-3-3-headline--size-... The headline's size.
+ * @boolean sd-1-3-3-headline--inverted Inverts the headline text.
+ * @boolean sd-1-3-3-headline--inline Sets inline behavior. Used exclusively when an sd-icon or other component is present. See usage <a href="#inline">here.</a>
  */
 
-.sd-1-3-2-headline,
-.sd-1-3-2-prose :is(h1, h2, h3, h4, h5) {
+.sd-1-3-3-headline,
+.sd-1-3-3-prose :is(h1, h2, h3, h4, h5) {
   display: flex;
   font-weight: 700;
   
   color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
 }
 
-.sd-1-3-2-headline sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5) sd-icon {
+.sd-1-3-3-headline sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5) sd-icon {
   flex-shrink: 0;
   font-size: 3rem;
   
@@ -86,15 +86,15 @@
 
 @media (min-width: 640px) {
 
-  .sd-1-3-2-headline sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5) sd-icon {
+  .sd-1-3-3-headline sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5) sd-icon {
     margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
   }
 }
 
-.sd-1-3-2-headline.sd-1-3-2-headline,
-  .sd-1-3-2-headline:is(h1):not(.sd-1-3-2-headline),
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline,
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-2-headline) {
+.sd-1-3-3-headline.sd-1-3-3-headline,
+  .sd-1-3-3-headline:is(h1):not(.sd-1-3-3-headline),
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline,
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-3-headline) {
   gap: var(--sd-spacing-4, 1rem) /* 16px */;
   font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
   line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
@@ -102,29 +102,29 @@
 
 @media (min-width: 640px) {
 
-  .sd-1-3-2-headline.sd-1-3-2-headline,
-  .sd-1-3-2-headline:is(h1):not(.sd-1-3-2-headline),
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline,
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-2-headline) {
+  .sd-1-3-3-headline.sd-1-3-3-headline,
+  .sd-1-3-3-headline:is(h1):not(.sd-1-3-3-headline),
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline,
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-3-headline) {
     font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */;
   }
 }
 
-.sd-1-3-2-headline.sd-1-3-2-headline sd-icon, .sd-1-3-2-headline:is(h1):not(.sd-1-3-2-headline) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-2-headline) sd-icon {
+.sd-1-3-3-headline.sd-1-3-3-headline sd-icon, .sd-1-3-3-headline:is(h1):not(.sd-1-3-3-headline) sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-3-headline) sd-icon {
   margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
 }
 
 @media (min-width: 640px) {
 
-  .sd-1-3-2-headline.sd-1-3-2-headline sd-icon, .sd-1-3-2-headline:is(h1):not(.sd-1-3-2-headline) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-2-headline) sd-icon {
+  .sd-1-3-3-headline.sd-1-3-3-headline sd-icon, .sd-1-3-3-headline:is(h1):not(.sd-1-3-3-headline) sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-3-headline) sd-icon {
     margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   }
 }
 
-.sd-1-3-2-headline.sd-1-3-2-headline--size-3xl,
-  .sd-1-3-2-headline:is(h2):not(.sd-1-3-2-headline),
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-3xl,
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-2-headline) {
+.sd-1-3-3-headline.sd-1-3-3-headline--size-3xl,
+  .sd-1-3-3-headline:is(h2):not(.sd-1-3-3-headline),
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-3xl,
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-3-headline) {
   gap: var(--sd-spacing-4, 1rem) /* 16px */;
   font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
   line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
@@ -132,144 +132,144 @@
 
 @media (min-width: 640px) {
 
-  .sd-1-3-2-headline.sd-1-3-2-headline--size-3xl,
-  .sd-1-3-2-headline:is(h2):not(.sd-1-3-2-headline),
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-3xl,
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-2-headline) {
+  .sd-1-3-3-headline.sd-1-3-3-headline--size-3xl,
+  .sd-1-3-3-headline:is(h2):not(.sd-1-3-3-headline),
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-3xl,
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-3-headline) {
     font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
   }
 }
 
-.sd-1-3-2-headline.sd-1-3-2-headline--size-3xl sd-icon, .sd-1-3-2-headline:is(h2):not(.sd-1-3-2-headline) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-3xl sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-2-headline) sd-icon {
+.sd-1-3-3-headline.sd-1-3-3-headline--size-3xl sd-icon, .sd-1-3-3-headline:is(h2):not(.sd-1-3-3-headline) sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-3xl sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-3-headline) sd-icon {
   margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
 }
 
 @media (min-width: 640px) {
 
-  .sd-1-3-2-headline.sd-1-3-2-headline--size-3xl sd-icon, .sd-1-3-2-headline:is(h2):not(.sd-1-3-2-headline) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-3xl sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-2-headline) sd-icon {
+  .sd-1-3-3-headline.sd-1-3-3-headline--size-3xl sd-icon, .sd-1-3-3-headline:is(h2):not(.sd-1-3-3-headline) sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-3xl sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-3-headline) sd-icon {
     margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   }
 }
 
-.sd-1-3-2-headline.sd-1-3-2-headline--size-xl,
-  .sd-1-3-2-headline.sd-1-3-2-headline--size-lg,
-  .sd-1-3-2-headline.sd-1-3-2-headline--size-base,
-  .sd-1-3-2-headline:is(h3, h4, h5):not(.sd-1-3-2-headline),
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-xl,
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-lg,
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-base,
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-3-2-headline) {
+.sd-1-3-3-headline.sd-1-3-3-headline--size-xl,
+  .sd-1-3-3-headline.sd-1-3-3-headline--size-lg,
+  .sd-1-3-3-headline.sd-1-3-3-headline--size-base,
+  .sd-1-3-3-headline:is(h3, h4, h5):not(.sd-1-3-3-headline),
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-xl,
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-lg,
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-base,
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-3-3-headline) {
   gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
   
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-3-2-headline.sd-1-3-2-headline--size-xl sd-icon, .sd-1-3-2-headline.sd-1-3-2-headline--size-lg sd-icon, .sd-1-3-2-headline.sd-1-3-2-headline--size-base sd-icon, .sd-1-3-2-headline:is(h3, h4, h5):not(.sd-1-3-2-headline) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-xl sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-lg sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-base sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-3-2-headline) sd-icon {
+.sd-1-3-3-headline.sd-1-3-3-headline--size-xl sd-icon, .sd-1-3-3-headline.sd-1-3-3-headline--size-lg sd-icon, .sd-1-3-3-headline.sd-1-3-3-headline--size-base sd-icon, .sd-1-3-3-headline:is(h3, h4, h5):not(.sd-1-3-3-headline) sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-xl sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-lg sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-base sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-3-3-headline) sd-icon {
   font-size: 2rem;
 }
 
-.sd-1-3-2-headline.sd-1-3-2-headline--size-xl,
-  .sd-1-3-2-headline:is(h3):not(.sd-1-3-2-headline),
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-xl,
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-3-2-headline) {
+.sd-1-3-3-headline.sd-1-3-3-headline--size-xl,
+  .sd-1-3-3-headline:is(h3):not(.sd-1-3-3-headline),
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-xl,
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-3-3-headline) {
   font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
 }
 
-.sd-1-3-2-headline.sd-1-3-2-headline--size-xl sd-icon, .sd-1-3-2-headline:is(h3):not(.sd-1-3-2-headline) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-xl sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-3-2-headline) sd-icon {
+.sd-1-3-3-headline.sd-1-3-3-headline--size-xl sd-icon, .sd-1-3-3-headline:is(h3):not(.sd-1-3-3-headline) sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-xl sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-3-3-headline) sd-icon {
   margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
 }
 
 @media (min-width: 640px) {
 
-  .sd-1-3-2-headline.sd-1-3-2-headline--size-xl sd-icon, .sd-1-3-2-headline:is(h3):not(.sd-1-3-2-headline) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-xl sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-3-2-headline) sd-icon {
+  .sd-1-3-3-headline.sd-1-3-3-headline--size-xl sd-icon, .sd-1-3-3-headline:is(h3):not(.sd-1-3-3-headline) sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-xl sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-3-3-headline) sd-icon {
     margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
   }
 }
 
-.sd-1-3-2-headline.sd-1-3-2-headline--size-lg,
-  .sd-1-3-2-headline.sd-1-3-2-headline--size-base,
-  .sd-1-3-2-headline:is(h4, h5):not(.sd-1-3-2-headline),
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-lg,
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-base,
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-1-3-2-headline) {
+.sd-1-3-3-headline.sd-1-3-3-headline--size-lg,
+  .sd-1-3-3-headline.sd-1-3-3-headline--size-base,
+  .sd-1-3-3-headline:is(h4, h5):not(.sd-1-3-3-headline),
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-lg,
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-base,
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-1-3-3-headline) {
   line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
 }
 
-.sd-1-3-2-headline.sd-1-3-2-headline--size-lg,
-  .sd-1-3-2-headline:is(h4),
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-lg,
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h4) {
+.sd-1-3-3-headline.sd-1-3-3-headline--size-lg,
+  .sd-1-3-3-headline:is(h4),
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-lg,
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h4) {
   font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
 }
 
-.sd-1-3-2-headline.sd-1-3-2-headline--size-lg sd-icon, .sd-1-3-2-headline:is(h4) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-lg sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
+.sd-1-3-3-headline.sd-1-3-3-headline--size-lg sd-icon, .sd-1-3-3-headline:is(h4) sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-lg sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
   margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
 }
 
 @media (min-width: 640px) {
 
-  .sd-1-3-2-headline.sd-1-3-2-headline--size-lg sd-icon, .sd-1-3-2-headline:is(h4) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-lg sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
+  .sd-1-3-3-headline.sd-1-3-3-headline--size-lg sd-icon, .sd-1-3-3-headline:is(h4) sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-lg sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
     margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   }
 }
 
-.sd-1-3-2-headline.sd-1-3-2-headline--size-base,
-  .sd-1-3-2-headline:is(h5):not(.sd-1-3-2-headline),
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-base,
-  .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-3-2-headline) {
+.sd-1-3-3-headline.sd-1-3-3-headline--size-base,
+  .sd-1-3-3-headline:is(h5):not(.sd-1-3-3-headline),
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-base,
+  .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-3-3-headline) {
   font-size: var(--sd-font-size-base, 1rem) /* 16px */;
 }
 
-.sd-1-3-2-headline.sd-1-3-2-headline--size-base sd-icon, .sd-1-3-2-headline:is(h5):not(.sd-1-3-2-headline) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-base sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-3-2-headline) sd-icon {
+.sd-1-3-3-headline.sd-1-3-3-headline--size-base sd-icon, .sd-1-3-3-headline:is(h5):not(.sd-1-3-3-headline) sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-base sd-icon, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-3-3-headline) sd-icon {
   margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
 }
 
-.sd-1-3-2-headline.sd-1-3-2-headline--size-base mark, .sd-1-3-2-headline:is(h5):not(.sd-1-3-2-headline) mark, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-base mark, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-3-2-headline) mark {
+.sd-1-3-3-headline.sd-1-3-3-headline--size-base mark, .sd-1-3-3-headline:is(h5):not(.sd-1-3-3-headline) mark, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5).sd-1-3-3-headline--size-base mark, .sd-1-3-3-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-3-3-headline) mark {
   color: inherit;
 }
 
-.sd-1-3-2-headline--inline {
+.sd-1-3-3-headline--inline {
   display: inline-block;
 }
 
-.sd-1-3-2-headline--inline sd-icon {
+.sd-1-3-3-headline--inline sd-icon {
   margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
   margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
   vertical-align: middle;
 }
 
-.sd-1-3-2-headline--inline:is(.sd-1-3-2-headline--size-xl, .sd-1-3-2-headline--size-lg, .sd-1-3-2-headline--size-base) sd-icon {
+.sd-1-3-3-headline--inline:is(.sd-1-3-3-headline--size-xl, .sd-1-3-3-headline--size-lg, .sd-1-3-3-headline--size-base) sd-icon {
   margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
 }
 
-.sd-1-3-2-headline--inverted:not(#_),
-.sd-1-3-2-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-3-2-headline):not(#_) {
+.sd-1-3-3-headline--inverted:not(#_),
+.sd-1-3-3-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-3-3-headline):not(#_) {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-1-3-2-headline--inverted:not(#_) sd-icon, .sd-1-3-2-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-3-2-headline):not(#_) sd-icon {
+.sd-1-3-3-headline--inverted:not(#_) sd-icon, .sd-1-3-3-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-3-3-headline):not(#_) sd-icon {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
 /**
  * Generates basic styles for interactive elements.
- * @name sd-1-3-2-interactive
+ * @name sd-1-3-3-interactive
  * @status stable
  * @since 1.11
- * @boolean sd-1-3-2-interactive--disabled Makes an element look disabled.
- * @boolean sd-1-3-2-interactive--inverted Inverts the colors of an element.
- * @boolean sd-1-3-2-interactive--reset Resets the default browser styles of e.g., a button.
+ * @boolean sd-1-3-3-interactive--disabled Makes an element look disabled.
+ * @boolean sd-1-3-3-interactive--inverted Inverts the colors of an element.
+ * @boolean sd-1-3-3-interactive--reset Resets the default browser styles of e.g., a button.
  */
 
-.sd-1-3-2-prose a--reset, .sd-1-3-2-interactive--reset {
+.sd-1-3-3-prose a--reset, .sd-1-3-3-interactive--reset {
     all: unset;
     outline: revert;
   }
 
-.sd-1-3-2-prose a,
-.sd-1-3-2-interactive {
+.sd-1-3-3-prose a,
+.sd-1-3-3-interactive {
   cursor: pointer;
   
   color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
@@ -279,80 +279,80 @@
   transition-duration: 150ms;
 }
 
-.sd-1-3-2-prose a:hover:not([disabled]),
-.sd-1-3-2-interactive:hover:not([disabled]) {
+.sd-1-3-3-prose a:hover:not([disabled]),
+.sd-1-3-3-interactive:hover:not([disabled]) {
   
   color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
 }
 
-.sd-1-3-2-prose a:active:not([disabled]),
-.sd-1-3-2-interactive:active:not([disabled]) {
+.sd-1-3-3-prose a:active:not([disabled]),
+.sd-1-3-3-interactive:active:not([disabled]) {
   
   color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
 }
 
-.sd-1-3-2-prose a:is(.sd-1-3-2-interactive), .sd-1-3-2-interactive:is(.sd-1-3-2-interactive) {
+.sd-1-3-3-prose a:is(.sd-1-3-3-interactive), .sd-1-3-3-interactive:is(.sd-1-3-3-interactive) {
   text-decoration-line: none;
 }
 
-.sd-1-3-2-prose a:focus-visible, .sd-1-3-2-interactive:focus-visible {
+.sd-1-3-3-prose a:focus-visible, .sd-1-3-3-interactive:focus-visible {
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
   outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
 }
 
-.sd-1-3-2-prose a--disabled,
-  .sd-1-3-2-prose a[disabled],
-  .sd-1-3-2-prose a[href=''],
-  .sd-1-3-2-interactive--disabled,
-  .sd-1-3-2-interactive[disabled],
-  .sd-1-3-2-interactive[href=''] {
+.sd-1-3-3-prose a--disabled,
+  .sd-1-3-3-prose a[disabled],
+  .sd-1-3-3-prose a[href=''],
+  .sd-1-3-3-interactive--disabled,
+  .sd-1-3-3-interactive[disabled],
+  .sd-1-3-3-interactive[href=''] {
   cursor: not-allowed;
   
   color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
 }
 
-.sd-1-3-2-prose a--disabled:hover:not([disabled]),
-  .sd-1-3-2-prose a[disabled]:hover:not([disabled]),
-  .sd-1-3-2-prose a[href='']:hover:not([disabled]),
-  .sd-1-3-2-interactive--disabled:hover:not([disabled]),
-  .sd-1-3-2-interactive[disabled]:hover:not([disabled]),
-  .sd-1-3-2-interactive[href='']:hover:not([disabled]) {
+.sd-1-3-3-prose a--disabled:hover:not([disabled]),
+  .sd-1-3-3-prose a[disabled]:hover:not([disabled]),
+  .sd-1-3-3-prose a[href='']:hover:not([disabled]),
+  .sd-1-3-3-interactive--disabled:hover:not([disabled]),
+  .sd-1-3-3-interactive[disabled]:hover:not([disabled]),
+  .sd-1-3-3-interactive[href='']:hover:not([disabled]) {
   
   color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
 }
 
-.sd-1-3-2-prose a--disabled:active:not([disabled]),
-  .sd-1-3-2-prose a[disabled]:active:not([disabled]),
-  .sd-1-3-2-prose a[href='']:active:not([disabled]),
-  .sd-1-3-2-interactive--disabled:active:not([disabled]),
-  .sd-1-3-2-interactive[disabled]:active:not([disabled]),
-  .sd-1-3-2-interactive[href='']:active:not([disabled]) {
+.sd-1-3-3-prose a--disabled:active:not([disabled]),
+  .sd-1-3-3-prose a[disabled]:active:not([disabled]),
+  .sd-1-3-3-prose a[href='']:active:not([disabled]),
+  .sd-1-3-3-interactive--disabled:active:not([disabled]),
+  .sd-1-3-3-interactive[disabled]:active:not([disabled]),
+  .sd-1-3-3-interactive[href='']:active:not([disabled]) {
   
   color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
 }
 
-.sd-1-3-2-prose--inverted a,
-.sd-1-3-2-interactive--inverted {
+.sd-1-3-3-prose--inverted a,
+.sd-1-3-3-interactive--inverted {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-1-3-2-prose--inverted a:hover:not([disabled]),
-.sd-1-3-2-interactive--inverted:hover:not([disabled]) {
+.sd-1-3-3-prose--inverted a:hover:not([disabled]),
+.sd-1-3-3-interactive--inverted:hover:not([disabled]) {
   
   color: rgb(var(--sd-color-primary-200, 224 233 243) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction text link and inverted pressed interaction button label */;
 }
 
-.sd-1-3-2-prose--inverted a:active:not([disabled]),
-.sd-1-3-2-interactive--inverted:active:not([disabled]) {
+.sd-1-3-3-prose--inverted a:active:not([disabled]),
+.sd-1-3-3-interactive--inverted:active:not([disabled]) {
   
   color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
 Used for inverted pressed interaction text link */;
 }
 
-.sd-1-3-2-prose--inverted a:focus-visible, .sd-1-3-2-interactive--inverted:focus-visible {
+.sd-1-3-3-prose--inverted a:focus-visible, .sd-1-3-3-interactive--inverted:focus-visible {
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
@@ -361,15 +361,15 @@ Used for inverted pressed interaction text link */;
 
 /**
  * Leadtext is used for text that should be highlighted and a focal point of the page.
- * @name sd-1-3-2-leadtext
+ * @name sd-1-3-3-leadtext
  * @status stable
  * @since 1.7
- * @variant { lg } sd-1-3-2-leadtext--size-... The leadtext's size.
- * @boolean sd-1-3-2-leadtext--inverted Inverts the leadtext text.
+ * @variant { lg } sd-1-3-3-leadtext--size-... The leadtext's size.
+ * @boolean sd-1-3-3-leadtext--inverted Inverts the leadtext text.
  */
 
-.sd-1-3-2-prose > .sd-1-3-2-leadtext,
-.sd-1-3-2-leadtext {
+.sd-1-3-3-prose > .sd-1-3-3-leadtext,
+.sd-1-3-3-leadtext {
   font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
   font-weight: 400;
   line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
@@ -377,7 +377,7 @@ Used for inverted pressed interaction text link */;
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-3-2-prose > .sd-1-3-2-leadtext--size-lg, .sd-1-3-2-leadtext--size-lg {
+.sd-1-3-3-prose > .sd-1-3-3-leadtext--size-lg, .sd-1-3-3-leadtext--size-lg {
   font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
   font-weight: 400;
   line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
@@ -385,22 +385,22 @@ Used for inverted pressed interaction text link */;
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-3-2-prose--inverted > .sd-1-3-2-leadtext,
-.sd-1-3-2-leadtext--inverted {
+.sd-1-3-3-prose--inverted > .sd-1-3-3-leadtext,
+.sd-1-3-3-leadtext--inverted {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
 /**
  * Generates basic styles for list elements.
- * @name sd-1-3-2-list
+ * @name sd-1-3-3-list
  * @status stable
  * @since 1.39.0
- * @boolean sd-1-3-2-list--inverted Inverts the list text.
+ * @boolean sd-1-3-3-list--inverted Inverts the list text.
  */
 
-.sd-1-3-2-list:not(.sd-1-3-2-list--icon),
-.sd-1-3-2-prose > :is(ol, ul) {
+.sd-1-3-3-list:not(.sd-1-3-3-list--icon),
+.sd-1-3-3-prose > :is(ol, ul) {
   list-style-position: revert;
   list-style-type: revert;
   padding: revert;
@@ -414,14 +414,14 @@ Used for inverted pressed interaction text link */;
    */
 }
 
-.sd-1-3-2-list:not(.sd-1-3-2-list--icon) li:not(:first-child), .sd-1-3-2-prose > :is(ol, ul) li:not(:first-child) {
+.sd-1-3-3-list:not(.sd-1-3-3-list--icon) li:not(:first-child), .sd-1-3-3-prose > :is(ol, ul) li:not(:first-child) {
   margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
 }
 
-.sd-1-3-2-list:not(.sd-1-3-2-list--icon) ul,
-  .sd-1-3-2-list:not(.sd-1-3-2-list--icon) ol,
-  .sd-1-3-2-prose > :is(ol, ul) ul,
-  .sd-1-3-2-prose > :is(ol, ul) ol {
+.sd-1-3-3-list:not(.sd-1-3-3-list--icon) ul,
+  .sd-1-3-3-list:not(.sd-1-3-3-list--icon) ol,
+  .sd-1-3-3-prose > :is(ol, ul) ul,
+  .sd-1-3-3-prose > :is(ol, ul) ol {
     all: revert;
     padding-left: 1.4em;
     padding-top: 0.75em;
@@ -429,8 +429,8 @@ Used for inverted pressed interaction text link */;
 
 @supports not (-webkit-hyphens: none) {
 
-.sd-1-3-2-list:not(.sd-1-3-2-list--icon),
-.sd-1-3-2-prose > :is(ol, ul) {
+.sd-1-3-3-list:not(.sd-1-3-3-list--icon),
+.sd-1-3-3-prose > :is(ol, ul) {
     /* Safari automatically adds some spacing. This adds it for other browsers. */
 
     /*
@@ -444,38 +444,38 @@ Used for inverted pressed interaction text link */;
    */
     /* Level 1 */
 }
-    .sd-1-3-2-list:not(.sd-1-3-2-list--icon) li, .sd-1-3-2-prose > :is(ol, ul) li {
+    .sd-1-3-3-list:not(.sd-1-3-3-list--icon) li, .sd-1-3-3-prose > :is(ol, ul) li {
     padding-left: 0.3em;
   }
-    .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ol):not(.sd-1-3-2-list--icon), .sd-1-3-2-prose > :is(ol, ul):is(ol):not(.sd-1-3-2-list--icon) {
+    .sd-1-3-3-list:not(.sd-1-3-3-list--icon):is(ol):not(.sd-1-3-3-list--icon), .sd-1-3-3-prose > :is(ol, ul):is(ol):not(.sd-1-3-3-list--icon) {
       counter-reset: item;
     }
-      .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ol):not(.sd-1-3-2-list--icon) > li, .sd-1-3-2-prose > :is(ol, ul):is(ol):not(.sd-1-3-2-list--icon) > li {
+      .sd-1-3-3-list:not(.sd-1-3-3-list--icon):is(ol):not(.sd-1-3-3-list--icon) > li, .sd-1-3-3-prose > :is(ol, ul):is(ol):not(.sd-1-3-3-list--icon) > li {
         counter-increment: item;
       }
-        .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ol):not(.sd-1-3-2-list--icon) > li::marker, .sd-1-3-2-prose > :is(ol, ul):is(ol):not(.sd-1-3-2-list--icon) > li::marker {
+        .sd-1-3-3-list:not(.sd-1-3-3-list--icon):is(ol):not(.sd-1-3-3-list--icon) > li::marker, .sd-1-3-3-prose > :is(ol, ul):is(ol):not(.sd-1-3-3-list--icon) > li::marker {
           content: counters(item, '.', decimal) '. ';
         }
         /* Level 2 */
-        .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ol):not(.sd-1-3-2-list--icon) > li > ol, .sd-1-3-2-prose > :is(ol, ul):is(ol):not(.sd-1-3-2-list--icon) > li > ol {
+        .sd-1-3-3-list:not(.sd-1-3-3-list--icon):is(ol):not(.sd-1-3-3-list--icon) > li > ol, .sd-1-3-3-prose > :is(ol, ul):is(ol):not(.sd-1-3-3-list--icon) > li > ol {
     padding-left: 1.9em;
           counter-reset: subitem;
   }
-          .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li, .sd-1-3-2-prose > :is(ol, ul):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li {
+          .sd-1-3-3-list:not(.sd-1-3-3-list--icon):is(ol):not(.sd-1-3-3-list--icon) > li > ol > li, .sd-1-3-3-prose > :is(ol, ul):is(ol):not(.sd-1-3-3-list--icon) > li > ol > li {
             counter-increment: subitem;
           }
-            .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li::marker, .sd-1-3-2-prose > :is(ol, ul):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li::marker {
+            .sd-1-3-3-list:not(.sd-1-3-3-list--icon):is(ol):not(.sd-1-3-3-list--icon) > li > ol > li::marker, .sd-1-3-3-prose > :is(ol, ul):is(ol):not(.sd-1-3-3-list--icon) > li > ol > li::marker {
               content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '. ';
             }
             /* Level 3 */
-            .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li > ol, .sd-1-3-2-prose > :is(ol, ul):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li > ol {
+            .sd-1-3-3-list:not(.sd-1-3-3-list--icon):is(ol):not(.sd-1-3-3-list--icon) > li > ol > li > ol, .sd-1-3-3-prose > :is(ol, ul):is(ol):not(.sd-1-3-3-list--icon) > li > ol > li > ol {
     padding-left: 2.7em;
               counter-reset: subsubitem;
   }
-              .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li > ol > li, .sd-1-3-2-prose > :is(ol, ul):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li > ol > li {
+              .sd-1-3-3-list:not(.sd-1-3-3-list--icon):is(ol):not(.sd-1-3-3-list--icon) > li > ol > li > ol > li, .sd-1-3-3-prose > :is(ol, ul):is(ol):not(.sd-1-3-3-list--icon) > li > ol > li > ol > li {
                 counter-increment: subsubitem;
               }
-                .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li > ol > li::marker, .sd-1-3-2-prose > :is(ol, ul):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li > ol > li::marker {
+                .sd-1-3-3-list:not(.sd-1-3-3-list--icon):is(ol):not(.sd-1-3-3-list--icon) > li > ol > li > ol > li::marker, .sd-1-3-3-prose > :is(ol, ul):is(ol):not(.sd-1-3-3-list--icon) > li > ol > li > ol > li::marker {
                   content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '.'
                     counters(subsubitem, '.', decimal) '. ';
                 }
@@ -483,35 +483,35 @@ Used for inverted pressed interaction text link */;
 
 /* Level 1 */
 
-.sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ul):not(.sd-1-3-2-list--icon),
-  .sd-1-3-2-list:not(.sd-1-3-2-list--icon) ul,
-  .sd-1-3-2-prose > :is(ol, ul):is(ul):not(.sd-1-3-2-list--icon),
-  .sd-1-3-2-prose > :is(ol, ul) ul {
+.sd-1-3-3-list:not(.sd-1-3-3-list--icon):is(ul):not(.sd-1-3-3-list--icon),
+  .sd-1-3-3-list:not(.sd-1-3-3-list--icon) ul,
+  .sd-1-3-3-prose > :is(ol, ul):is(ul):not(.sd-1-3-3-list--icon),
+  .sd-1-3-3-prose > :is(ol, ul) ul {
   padding-left: 0.5em;
 }
 
-.sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ul):not(.sd-1-3-2-list--icon) > li, .sd-1-3-2-list:not(.sd-1-3-2-list--icon) ul > li, .sd-1-3-2-prose > :is(ol, ul):is(ul):not(.sd-1-3-2-list--icon) > li, .sd-1-3-2-prose > :is(ol, ul) ul > li {
+.sd-1-3-3-list:not(.sd-1-3-3-list--icon):is(ul):not(.sd-1-3-3-list--icon) > li, .sd-1-3-3-list:not(.sd-1-3-3-list--icon) ul > li, .sd-1-3-3-prose > :is(ol, ul):is(ul):not(.sd-1-3-3-list--icon) > li, .sd-1-3-3-prose > :is(ol, ul) ul > li {
   padding-left: 0.75em;
       list-style-type: '\2022'; /* • */
 }
 
 /* Level 2 */
 
-.sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ul):not(.sd-1-3-2-list--icon) > li > ul, .sd-1-3-2-list:not(.sd-1-3-2-list--icon) ul > li > ul, .sd-1-3-2-prose > :is(ol, ul):is(ul):not(.sd-1-3-2-list--icon) > li > ul, .sd-1-3-2-prose > :is(ol, ul) ul > li > ul {
+.sd-1-3-3-list:not(.sd-1-3-3-list--icon):is(ul):not(.sd-1-3-3-list--icon) > li > ul, .sd-1-3-3-list:not(.sd-1-3-3-list--icon) ul > li > ul, .sd-1-3-3-prose > :is(ol, ul):is(ul):not(.sd-1-3-3-list--icon) > li > ul, .sd-1-3-3-prose > :is(ol, ul) ul > li > ul {
   padding-left: 0.3em;
 }
 
-.sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ul):not(.sd-1-3-2-list--icon) > li > ul > li, .sd-1-3-2-list:not(.sd-1-3-2-list--icon) ul > li > ul > li, .sd-1-3-2-prose > :is(ol, ul):is(ul):not(.sd-1-3-2-list--icon) > li > ul > li, .sd-1-3-2-prose > :is(ol, ul) ul > li > ul > li {
+.sd-1-3-3-list:not(.sd-1-3-3-list--icon):is(ul):not(.sd-1-3-3-list--icon) > li > ul > li, .sd-1-3-3-list:not(.sd-1-3-3-list--icon) ul > li > ul > li, .sd-1-3-3-prose > :is(ol, ul):is(ul):not(.sd-1-3-3-list--icon) > li > ul > li, .sd-1-3-3-prose > :is(ol, ul) ul > li > ul > li {
           list-style-type: '\002B1D'; /* · */
         }
 
 /* Level 3 */
 
-.sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ul):not(.sd-1-3-2-list--icon) > li > ul > li > ul, .sd-1-3-2-list:not(.sd-1-3-2-list--icon) ul > li > ul > li > ul, .sd-1-3-2-prose > :is(ol, ul):is(ul):not(.sd-1-3-2-list--icon) > li > ul > li > ul, .sd-1-3-2-prose > :is(ol, ul) ul > li > ul > li > ul {
+.sd-1-3-3-list:not(.sd-1-3-3-list--icon):is(ul):not(.sd-1-3-3-list--icon) > li > ul > li > ul, .sd-1-3-3-list:not(.sd-1-3-3-list--icon) ul > li > ul > li > ul, .sd-1-3-3-prose > :is(ol, ul):is(ul):not(.sd-1-3-3-list--icon) > li > ul > li > ul, .sd-1-3-3-prose > :is(ol, ul) ul > li > ul > li > ul {
   padding-left: 0.4em;
 }
 
-.sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ul):not(.sd-1-3-2-list--icon) > li > ul > li > ul > li, .sd-1-3-2-list:not(.sd-1-3-2-list--icon) ul > li > ul > li > ul > li, .sd-1-3-2-prose > :is(ol, ul):is(ul):not(.sd-1-3-2-list--icon) > li > ul > li > ul > li, .sd-1-3-2-prose > :is(ol, ul) ul > li > ul > li > ul > li {
+.sd-1-3-3-list:not(.sd-1-3-3-list--icon):is(ul):not(.sd-1-3-3-list--icon) > li > ul > li > ul > li, .sd-1-3-3-list:not(.sd-1-3-3-list--icon) ul > li > ul > li > ul > li, .sd-1-3-3-prose > :is(ol, ul):is(ul):not(.sd-1-3-3-list--icon) > li > ul > li > ul > li, .sd-1-3-3-prose > :is(ol, ul) ul > li > ul > li > ul > li {
               list-style-type: '\2010'; /* - */
             }
 
@@ -519,19 +519,19 @@ Used for inverted pressed interaction text link */;
   * Icon lists
   */
 
-.sd-1-3-2-list--icon {
+.sd-1-3-3-list--icon {
   padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
   padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
   text-align: left;
 }
 
-.sd-1-3-2-list--icon li sd-icon:first-of-type,
-    .sd-1-3-2-list--icon li .sd-1-3-2-list--icon__icon:first-of-type {
+.sd-1-3-3-list--icon li sd-icon:first-of-type,
+    .sd-1-3-3-list--icon li .sd-1-3-3-list--icon__icon:first-of-type {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-1-3-2-list--icon {
+.sd-1-3-3-list--icon {
   list-style-type: '';
 }
 
@@ -539,19 +539,19 @@ Used for inverted pressed interaction text link */;
     styles without affecting semantics is to set list-style-type to an empty string.
     https://www.matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics */
 
-.sd-1-3-2-list--icon > li:first-of-type {
+.sd-1-3-3-list--icon > li:first-of-type {
   padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
 }
 
-.sd-1-3-2-list--icon li {
+.sd-1-3-3-list--icon li {
   position: relative;
   padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
   padding-left: var(--sd-spacing-10, 2.5rem) /* 40px */;
   line-height: 32px;
 }
 
-.sd-1-3-2-list--icon li > sd-icon:first-of-type,
-    .sd-1-3-2-list--icon li > .sd-1-3-2-list--icon__icon:first-of-type {
+.sd-1-3-3-list--icon li > sd-icon:first-of-type,
+    .sd-1-3-3-list--icon li > .sd-1-3-3-list--icon__icon:first-of-type {
   position: absolute;
   left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
@@ -559,16 +559,16 @@ Used for inverted pressed interaction text link */;
   color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
 }
 
-.sd-1-3-2-list--icon.sd-1-3-2-list--horizontal {
+.sd-1-3-3-list--icon.sd-1-3-3-list--horizontal {
   display: flex;
 }
 
-.sd-1-3-2-list--icon.sd-1-3-2-list--horizontal li {
+.sd-1-3-3-list--icon.sd-1-3-3-list--horizontal li {
   display: flex;
   padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
 }
 
-.sd-1-3-2-list--icon.sd-1-3-2-list--horizontal li:not(:last-child) {
+.sd-1-3-3-list--icon.sd-1-3-3-list--horizontal li:not(:last-child) {
   margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
 }
 
@@ -576,31 +576,31 @@ Used for inverted pressed interaction text link */;
  * Inverted
  */
 
-.sd-1-3-2-list--inverted,
-.sd-1-3-2-prose--inverted > :is(ol, ul) {
+.sd-1-3-3-list--inverted,
+.sd-1-3-3-prose--inverted > :is(ol, ul) {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
-.sd-1-3-2-list--inverted li > sd-icon:first-of-type,
-  .sd-1-3-2-list--inverted li > .sd-1-3-2-list--icon__icon:first-of-type,
-  .sd-1-3-2-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type,
-  .sd-1-3-2-prose--inverted > :is(ol, ul) li > .sd-1-3-2-list--icon__icon:first-of-type {
+.sd-1-3-3-list--inverted li > sd-icon:first-of-type,
+  .sd-1-3-3-list--inverted li > .sd-1-3-3-list--icon__icon:first-of-type,
+  .sd-1-3-3-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type,
+  .sd-1-3-3-prose--inverted > :is(ol, ul) li > .sd-1-3-3-list--icon__icon:first-of-type {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
 /**
  * A paragraph is used to display blocks of text. It uses the base font size and can contain bold and/or link styles.
- * @name sd-1-3-2-paragraph
+ * @name sd-1-3-3-paragraph
  * @status stable
  * @since 1.7
- * @variant { sm } sd-1-3-2-paragraph--size-... The paragraph's font size.
- * @boolean sd-1-3-2-paragraph--inverted Inverts the paragraph text.
+ * @variant { sm } sd-1-3-3-paragraph--size-... The paragraph's font size.
+ * @boolean sd-1-3-3-paragraph--inverted Inverts the paragraph text.
  */
 
-.sd-1-3-2-paragraph,
-.sd-1-3-2-prose p {
+.sd-1-3-3-paragraph,
+.sd-1-3-3-prose p {
   font-size: var(--sd-font-size-base, 1rem) /* 16px */;
   font-weight: 400;
   line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
@@ -608,7 +608,7 @@ Used for inverted pressed interaction text link */;
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-3-2-paragraph--size-sm, .sd-1-3-2-prose p--size-sm {
+.sd-1-3-3-paragraph--size-sm, .sd-1-3-3-prose p--size-sm {
   font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
   font-weight: 400;
   line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
@@ -616,35 +616,35 @@ Used for inverted pressed interaction text link */;
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-3-2-paragraph--inverted,
-.sd-1-3-2-prose--inverted p {
+.sd-1-3-3-paragraph--inverted,
+.sd-1-3-3-prose--inverted p {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
 /**
  * Generates basic styles for media elements.
- * @name sd-1-3-2-media
+ * @name sd-1-3-3-media
  * @status stable
  * @since 2.5.0
- * @boolean sd-1-3-2-media--inverted Inverts the figcaption text.
+ * @boolean sd-1-3-3-media--inverted Inverts the figcaption text.
  */
 
-.sd-1-3-2-prose figure,
-figure.sd-1-3-2-media {
+.sd-1-3-3-prose figure,
+figure.sd-1-3-3-media {
   margin: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
 }
 
-.sd-1-3-2-prose figure figcaption, figure.sd-1-3-2-media figcaption {
+.sd-1-3-3-prose figure figcaption, figure.sd-1-3-3-media figcaption {
   
   color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
 }
 
-.sd-1-3-2-prose figure figcaption:last-child, figure.sd-1-3-2-media figcaption:last-child {
+.sd-1-3-3-prose figure figcaption:last-child, figure.sd-1-3-3-media figcaption:last-child {
   margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
 }
 
-.sd-1-3-2-prose--inverted figure figcaption, figure.sd-1-3-2-media--inverted figcaption {
+.sd-1-3-3-prose--inverted figure figcaption, figure.sd-1-3-3-media--inverted figcaption {
   
   color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
 Used for inverted pressed interaction text link */;
@@ -652,18 +652,18 @@ Used for inverted pressed interaction text link */;
 
 /**
  * A table cell is a single cell inside a table, used to display discrete data elements.
- * @name sd-1-3-2-table-cell
+ * @name sd-1-3-3-table-cell
  * @status stable
  * @since 1.13
- * @boolean sd-1-3-2-table-cell--divider Displays a divider to the right.
- * @variant { white | primary-100 | neutral-100 } sd-1-3-2-table-cell--bg-... Applies the selected background-color to the table cell. If not selected, a transparent background-color is used per default.
- * @boolean sd-1-3-2-table-cell--shadow-active Displays the table shadow.
- * @variant { top | left | right | bottom } sd-1-3-2-table-cell--shadow-... Applies the selected shadow to the table cell.
+ * @boolean sd-1-3-3-table-cell--divider Displays a divider to the right.
+ * @variant { white | primary-100 | neutral-100 } sd-1-3-3-table-cell--bg-... Applies the selected background-color to the table cell. If not selected, a transparent background-color is used per default.
+ * @boolean sd-1-3-3-table-cell--shadow-active Displays the table shadow.
+ * @variant { top | left | right | bottom } sd-1-3-3-table-cell--shadow-... Applies the selected shadow to the table cell.
  */
 
-.sd-1-3-2-prose td,
-.sd-1-3-2-prose th,
-.sd-1-3-2-table-cell {
+.sd-1-3-3-prose td,
+.sd-1-3-3-prose th,
+.sd-1-3-3-table-cell {
   border-top-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 0px;
@@ -680,11 +680,11 @@ Used for divider, teaser, container, ...  */;
   color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
 }
 
-.sd-1-3-2-table-cell--divider {
+.sd-1-3-3-table-cell--divider {
   border-right-width: 1px;
 }
 
-.sd-1-3-2-table-cell--shadow-top:after, .sd-1-3-2-table-cell--shadow-bottom:after, .sd-1-3-2-table-cell--shadow-left:after, .sd-1-3-2-table-cell--shadow-right:after {
+.sd-1-3-3-table-cell--shadow-top:after, .sd-1-3-3-table-cell--shadow-bottom:after, .sd-1-3-3-table-cell--shadow-left:after, .sd-1-3-3-table-cell--shadow-right:after {
   pointer-events: none;
   position: absolute;
   --tw-gradient-from: rgb(0 0 0 / var(--sd-opacity-10, 0.1)) var(--tw-gradient-from-position);
@@ -699,7 +699,7 @@ Used for divider, teaser, container, ...  */;
   content: var(--tw-content);
 }
 
-.sd-1-3-2-table-cell--shadow-top:after, .sd-1-3-2-table-cell--shadow-bottom:after {
+.sd-1-3-3-table-cell--shadow-top:after, .sd-1-3-3-table-cell--shadow-bottom:after {
   left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   height: var(--sd-spacing-2-5, 0.625rem) /* 10px */;
@@ -707,7 +707,7 @@ Used for divider, teaser, container, ...  */;
 
 /* fix that shows line on top of table-cell */
 
-.sd-1-3-2-table-cell--shadow-top:before, .sd-1-3-2-table-cell--shadow-bottom:before {
+.sd-1-3-3-table-cell--shadow-top:before, .sd-1-3-3-table-cell--shadow-bottom:before {
   position: absolute;
   left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   display: block;
@@ -721,66 +721,66 @@ Used for divider, teaser, container, ...  */;
   content: var(--tw-content);
 }
 
-.sd-1-3-2-table-cell--shadow-left:after, .sd-1-3-2-table-cell--shadow-right:after {
+.sd-1-3-3-table-cell--shadow-left:after, .sd-1-3-3-table-cell--shadow-right:after {
   top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   width: var(--sd-spacing-2-5, 0.625rem) /* 10px */;
 }
 
-.sd-1-3-2-table-cell.sd-1-3-2-table-cell--shadow-active:after {
+.sd-1-3-3-table-cell.sd-1-3-3-table-cell--shadow-active:after {
   opacity: 100%;
 }
 
-.sd-1-3-2-table-cell--shadow-top:after {
+.sd-1-3-3-table-cell--shadow-top:after {
   top: -10px;
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
 
 /* fix that shows line on top of table-cell */
 
-.sd-1-3-2-table-cell--shadow-top:before {
+.sd-1-3-3-table-cell--shadow-top:before {
   bottom: -1px;
 }
 
-.sd-1-3-2-table-cell--shadow-bottom:after {
+.sd-1-3-3-table-cell--shadow-bottom:after {
   bottom: -10px;
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
 
 /* fix that shows line on top of table-cell */
 
-.sd-1-3-2-table-cell--shadow-bottom:before {
+.sd-1-3-3-table-cell--shadow-bottom:before {
   top: -1px;
 }
 
-.sd-1-3-2-table-cell--shadow-left:after {
+.sd-1-3-3-table-cell--shadow-left:after {
   left: -10px;
   background-image: linear-gradient(to left, var(--tw-gradient-stops));
 }
 
-.sd-1-3-2-table-cell--shadow-right:after {
+.sd-1-3-3-table-cell--shadow-right:after {
   right: -10px;
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
-.sd-1-3-2-table-cell--bg-white {
+.sd-1-3-3-table-cell--bg-white {
   
   background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
 }
 
-.sd-1-3-2-table-cell--bg-primary-100 {
+.sd-1-3-3-table-cell--bg-primary-100 {
   
   background-color: rgb(var(--sd-color-primary-100, 236 240 249) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
 }
 
-.sd-1-3-2-table-cell--bg-neutral-100 {
+.sd-1-3-3-table-cell--bg-neutral-100 {
   
   background-color: rgb(var(--sd-color-neutral-100, 246 246 246) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
 }
 
 /**
  * A table is organized structured content, used for scanning, comparing, and analyzing the data.
- * @name sd-1-3-2-table
+ * @name sd-1-3-3-table
  * @status stable
  * @since 1.13
  */
@@ -789,8 +789,8 @@ Used for divider, teaser, container, ...  */;
 * Remove inherited styles from table before applying our styles.
 */
 
-.sd-1-3-2-table,
-.sd-1-3-2-prose table {
+.sd-1-3-3-table,
+.sd-1-3-3-prose table {
   all: unset;
   display: table;
   border-collapse: collapse;
@@ -799,13 +799,13 @@ Used for divider, teaser, container, ...  */;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
 
-.sd-1-3-2-table thead tr:first-of-type, .sd-1-3-2-table tfoot tr:first-of-type, .sd-1-3-2-prose table thead tr:first-of-type, .sd-1-3-2-prose table tfoot tr:first-of-type {
+.sd-1-3-3-table thead tr:first-of-type, .sd-1-3-3-table tfoot tr:first-of-type, .sd-1-3-3-prose table thead tr:first-of-type, .sd-1-3-3-prose table tfoot tr:first-of-type {
   position: relative;
 }
 
 /* plop:style */
 
-.sd-1-3-2-prose {
+.sd-1-3-3-prose {
   /* Optimize for reading. */
   max-width: 80ch;
   text-align: left;
@@ -813,67 +813,67 @@ Used for divider, teaser, container, ...  */;
 
 /* Add default spacings */
 
-.sd-1-3-2-prose > *:not(:first-child) {
+.sd-1-3-3-prose > *:not(:first-child) {
   margin-top: var(--sd-spacing-4, 1rem) /* 16px */;
 }
 
 /* First element has no margin-top */
 
-.sd-1-3-2-prose > *:first-child {
+.sd-1-3-3-prose > *:first-child {
   margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
 }
 
 /* headings after a heading have a smaller margin-top */
 
-.sd-1-3-2-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
+.sd-1-3-3-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
     /* :not(#_) is a hack to raise specifity, see https://stackoverflow.com/a/61781795 */
     margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
   }
 
 /* Headlines after other non-headlines have a larger margin-top */
 
-.sd-1-3-2-prose > *:not(:is(h1, h2, h3, h4, h5)) + :is(h1, h2, h3, h4, h5):not(#_) {
+.sd-1-3-3-prose > *:not(:is(h1, h2, h3, h4, h5)) + :is(h1, h2, h3, h4, h5):not(#_) {
   margin-top: var(--sd-spacing-8, 2rem) /* 32px */;
 }
 
 /* Images and figures lead to a bigger margin-top for the next element */
 
-.sd-1-3-2-prose > figure + *:not(#_),
-  .sd-1-3-2-prose > img + *:not(#_) {
+.sd-1-3-3-prose > figure + *:not(#_),
+  .sd-1-3-3-prose > img + *:not(#_) {
   margin-top: var(--sd-spacing-6, 1.5rem) /* 24px */;
 }
 
 /* Add styles for elements that are not based on existing CSS styles */
 
-.sd-1-3-2-prose hr {
+.sd-1-3-3-prose hr {
   height: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
   border-top-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-border-opacity, 1)) /* Used for disabled state */;
 }
 
-.sd-1-3-2-prose pre {
+.sd-1-3-3-prose pre {
   overflow: auto;
 }
 
-.sd-1-3-2-prose blockquote,
-    .sd-1-3-2-prose blockquote > * {
+.sd-1-3-3-prose blockquote,
+    .sd-1-3-3-prose blockquote > * {
   font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
 }
 
-.sd-1-3-2-prose blockquote:has(*) *:first-child::before, .sd-1-3-2-prose blockquote:not(:has(*))::before {
+.sd-1-3-3-prose blockquote:has(*) *:first-child::before, .sd-1-3-3-prose blockquote:not(:has(*))::before {
         content: open-quote;
         display: inline;
       }
 
-.sd-1-3-2-prose blockquote:has(*) *:first-child::after, .sd-1-3-2-prose blockquote:not(:has(*))::after {
+.sd-1-3-3-prose blockquote:has(*) *:first-child::after, .sd-1-3-3-prose blockquote:not(:has(*))::after {
         content: close-quote;
         display: inline;
       }
 
 /* Fixes for other elements */
 
-.sd-1-3-2-prose > :is(ul, ol):not(#_) {
+.sd-1-3-3-prose > :is(ul, ol):not(#_) {
     /* ul and ol have padding that has to be reset */
     padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
     padding-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
@@ -881,18 +881,18 @@ Used for divider, teaser, container, ...  */;
 
 /* Inverted styles */
 
-.sd-1-3-2-prose--inverted hr {
+.sd-1-3-3-prose--inverted hr {
   --tw-border-opacity: 1;
   border-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-border-opacity, 1)) /* Used for buttons, inverted focus state */;
 }
 
-.sd-1-3-2-prose--inverted pre {
+.sd-1-3-3-prose--inverted pre {
   
   color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
 }
 
 /* Full width styles */
 
-.sd-1-3-2-prose--full-width {
+.sd-1-3-3-prose--full-width {
     max-width: unset;
   }