@porsche-design-system/components-angular 4.0.0-beta.2 → 4.0.0-beta.4

package/tailwindcss/index.css

@@ -11,109 +11,106 @@
   --color-white: #fff;
 
   --color-focus: light-dark(#1a44ea, #1a44ea);
-  --color-canvas: light-dark(#fff, hsl(225, 66.7%, 1.2%));
-  --color-surface: light-dark(hsl(240, 10%, 95%), hsl(240, 2%, 10%));
-  --color-frosted: light-dark(
-    hsla(240, 5%, 70%, 0.148),
-    hsla(240, 2%, 43%, 0.228)
-  );
+  --color-canvas: light-dark(#fff, hsl(225 66.7% 1.2%));
+  --color-surface: light-dark(hsl(240 10% 95%), hsl(240 2% 10%));
+  --color-frosted: light-dark(hsl(240 5% 70% / 0.148), hsl(240 2% 43% / 0.228));
   --color-frosted-soft: light-dark(
-    hsla(234, 9.8%, 60%, 0.06),
-    hsla(240, 3.7%, 26.5%, 0.154)
+    hsl(234 9.8% 60% / 0.06),
+    hsl(240 3.7% 26.5% / 0.154)
   );
   --color-frosted-strong: light-dark(
-    hsla(236, 6.5%, 42%, 0.236),
-    hsla(240, 1.5%, 61.8%, 0.302)
+    hsl(236 6.5% 42% / 0.236),
+    hsl(240 1.5% 61.8% / 0.302)
   );
   --color-backdrop: light-dark(
-    hsla(240, 5.3%, 14.9%, 0.5),
-    hsla(240, 5.3%, 14.9%, 0.5)
+    hsl(240 5.3% 14.9% / 0.5),
+    hsl(240 5.3% 14.9% / 0.5)
   );
   --color-contrast-lower: light-dark(
-    hsla(234, 6%, 32.9%, 0.324),
-    hsla(240, 1.5%, 61.8%, 0.302)
+    hsl(234 6% 32.9% / 0.324),
+    hsl(240 1.5% 61.8% / 0.302)
   );
   --color-contrast-low: light-dark(
-    hsla(240, 5.3%, 14.9%, 0.5),
-    hsla(240, 12.5%, 96.9%, 0.45)
+    hsl(240 5.3% 14.9% / 0.5),
+    hsl(240 12.5% 96.9% / 0.45)
   );
   --color-contrast-medium: light-dark(
-    hsla(240, 6.1%, 7%, 0.6),
-    hsla(240, 12.5%, 96.9%, 0.56)
+    hsl(240 6.1% 7% / 0.6),
+    hsl(240 12.5% 96.9% / 0.56)
   );
   --color-contrast-high: light-dark(
-    hsla(240, 7.1%, 11%, 0.7),
-    hsla(240, 12.5%, 96.9%, 0.67)
+    hsl(240 7.1% 11% / 0.7),
+    hsl(240 12.5% 96.9% / 0.67)
   );
   --color-contrast-higher: light-dark(
-    hsla(240, 8.7%, 9%, 0.8),
-    hsla(240, 12.5%, 96.9%, 0.78)
+    hsl(240 8.7% 9% / 0.8),
+    hsl(240 12.5% 96.9% / 0.78)
   );
-  --color-primary: light-dark(hsl(225, 66.7%, 1.2%), hsl(225, 100%, 99%));
-  --color-success: light-dark(hsl(115, 77.5%, 27.8%), hsl(157, 84.9%, 41.6%));
+  --color-primary: light-dark(hsl(225 66.7% 1.2%), hsl(225 100% 99%));
+  --color-success: light-dark(hsl(115 77.5% 27.8%), hsl(157 84.9% 41.6%));
   --color-success-low: light-dark(
-    hsla(115, 77.5%, 27.8%, 0.18),
-    hsla(157, 84.9%, 41.6%, 0.18)
+    hsl(115 77.5% 27.8% / 0.18),
+    hsl(157 84.9% 41.6% / 0.18)
   );
   --color-success-medium: light-dark(
-    hsla(115, 77.5%, 27.8%, 0.6),
-    hsla(157, 84.9%, 41.6%, 0.6)
+    hsl(115 77.5% 27.8% / 0.6),
+    hsl(157 84.9% 41.6% / 0.6)
   );
   --color-success-frosted: light-dark(
-    hsla(115, 77.5%, 27.8%, 0.18),
-    hsla(157, 84.9%, 41.6%, 0.26)
+    hsl(115 77.5% 27.8% / 0.18),
+    hsl(157 84.9% 41.6% / 0.26)
   );
   --color-success-frosted-soft: light-dark(
-    hsla(115, 77.5%, 27.8%, 0.1),
-    hsla(157, 84.9%, 41.6%, 0.1)
+    hsl(115 77.5% 27.8% / 0.1),
+    hsl(157 84.9% 41.6% / 0.1)
   );
-  --color-warning: light-dark(hsl(28, 97.7%, 34.1%), hsl(28, 90.2%, 56.1%));
+  --color-warning: light-dark(hsl(28 97.7% 34.1%), hsl(28 90.2% 56.1%));
   --color-warning-low: light-dark(
-    hsla(28, 97.7%, 34.1%, 0.18),
-    hsla(28, 90.2%, 56.1%, 0.18)
+    hsl(28 97.7% 34.1% / 0.18),
+    hsl(28 90.2% 56.1% / 0.18)
   );
   --color-warning-medium: light-dark(
-    hsla(28, 97.7%, 34.1%, 0.6),
-    hsla(28, 90.2%, 56.1%, 0.6)
+    hsl(28 97.7% 34.1% / 0.6),
+    hsl(28 90.2% 56.1% / 0.6)
   );
   --color-warning-frosted: light-dark(
-    hsla(28, 97.7%, 34.1%, 0.18),
-    hsla(28, 90.2%, 56.1%, 0.26)
+    hsl(28 97.7% 34.1% / 0.18),
+    hsl(28 90.2% 56.1% / 0.26)
   );
-  --color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
-  --color-error: light-dark(hsl(357, 78%, 41%), hsl(0, 96.9%, 62%));
+  --color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
+  --color-error: light-dark(hsl(357 78% 41%), hsl(0 96.9% 62%));
   --color-error-low: light-dark(
-    hsla(357, 78%, 41%, 0.18),
-    hsla(0, 96.9%, 62%, 0.18)
+    hsl(357 78% 41% / 0.18),
+    hsl(0 96.9% 62% / 0.18)
   );
   --color-error-medium: light-dark(
-    hsla(357, 78%, 41%, 0.6),
-    hsla(0, 96.9%, 62%, 0.6)
+    hsl(357 78% 41% / 0.6),
+    hsl(0 96.9% 62% / 0.6)
   );
   --color-error-frosted: light-dark(
-    hsla(357, 78%, 41%, 0.18),
-    hsla(0, 96.9%, 62%, 0.26)
+    hsl(357 78% 41% / 0.18),
+    hsl(0 96.9% 62% / 0.26)
   );
   --color-error-frosted-soft: light-dark(
-    hsla(357, 78%, 41%, 0.1),
-    hsla(0, 96.9%, 62%, 0.1)
+    hsl(357 78% 41% / 0.1),
+    hsl(0 96.9% 62% / 0.1)
   );
-  --color-info: light-dark(hsl(228, 83.2%, 51%), hsl(210, 100%, 54.5%));
+  --color-info: light-dark(hsl(228 83.2% 51%), hsl(210 100% 54.5%));
   --color-info-low: light-dark(
-    hsla(228, 83.2%, 51%, 0.18),
-    hsla(210, 100%, 54.5%, 0.18)
+    hsl(228 83.2% 51% / 0.18),
+    hsl(210 100% 54.5% / 0.18)
   );
   --color-info-medium: light-dark(
-    hsla(228, 83.2%, 51%, 0.6),
-    hsla(210, 100%, 54.5%, 0.6)
+    hsl(228 83.2% 51% / 0.6),
+    hsl(210 100% 54.5% / 0.6)
   );
   --color-info-frosted: light-dark(
-    hsla(228, 83.2%, 51%, 0.18),
-    hsla(210, 100%, 54.5%, 0.26)
+    hsl(228 83.2% 51% / 0.18),
+    hsl(210 100% 54.5% / 0.26)
   );
   --color-info-frosted-soft: light-dark(
-    hsla(228, 83.2%, 51%, 0.1),
-    hsla(210, 100%, 54.5%, 0.1)
+    hsl(228 83.2% 51% / 0.1),
+    hsl(210 100% 54.5% / 0.1)
   );
 
   /* Typography */
@@ -129,7 +126,7 @@
 
   --text-2xs: 0.75rem;
   --text-2xs--line-height: calc(6px + 2.125ex);
-  --text-xs: clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem);
+  --text-xs: 0.875rem;
   --text-xs--line-height: calc(6px + 2.125ex);
   --text-base: 1rem;
   --text-base--line-height: calc(6px + 2.125ex);
@@ -143,6 +140,12 @@
   --text-xl--line-height: calc(6px + 2.125ex);
   --text-2xl: clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem);
   --text-2xl--line-height: calc(6px + 2.125ex);
+  --text-3xl: clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem);
+  --text-3xl--line-height: calc(6px + 2.125ex);
+  --text-4xl: clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem);
+  --text-4xl--line-height: calc(6px + 2.125ex);
+  --text-5xl: clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem);
+  --text-5xl--line-height: calc(6px + 2.125ex);
 
   /* Breakpoint */
   --breakpoint-xs: 480px;
@@ -243,111 +246,111 @@
     .scheme-light-dark {
       --color-focus: #1a44ea;
       --color-canvas: #fff;
-      --color-surface: hsl(240, 10%, 95%);
-      --color-frosted: hsla(240, 5%, 70%, 0.148);
-      --color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
-      --color-frosted-strong: hsla(236, 6.5%, 42%, 0.236);
-      --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
-      --color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
-      --color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
-      --color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
-      --color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
-      --color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
-      --color-primary: hsl(225, 66.7%, 1.2%);
-      --color-success: hsl(115, 77.5%, 27.8%);
-      --color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
-      --color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
-      --color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
-      --color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
-      --color-warning: hsl(28, 97.7%, 34.1%);
-      --color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
-      --color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
-      --color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
-      --color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
-      --color-error: hsl(357, 78%, 41%);
-      --color-error-low: hsla(357, 78%, 41%, 0.18);
-      --color-error-medium: hsla(357, 78%, 41%, 0.6);
-      --color-error-frosted: hsla(357, 78%, 41%, 0.18);
-      --color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
-      --color-info: hsl(228, 83.2%, 51%);
-      --color-info-low: hsla(228, 83.2%, 51%, 0.18);
-      --color-info-medium: hsla(228, 83.2%, 51%, 0.6);
-      --color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
-      --color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
+      --color-surface: hsl(240 10% 95%);
+      --color-frosted: hsl(240 5% 70% / 0.148);
+      --color-frosted-soft: hsl(234 9.8% 60% / 0.06);
+      --color-frosted-strong: hsl(236 6.5% 42% / 0.236);
+      --color-backdrop: hsl(240 5.3% 14.9% / 0.5);
+      --color-contrast-lower: hsl(234 6% 32.9% / 0.324);
+      --color-contrast-low: hsl(240 5.3% 14.9% / 0.5);
+      --color-contrast-medium: hsl(240 6.1% 7% / 0.6);
+      --color-contrast-high: hsl(240 7.1% 11% / 0.7);
+      --color-contrast-higher: hsl(240 8.7% 9% / 0.8);
+      --color-primary: hsl(225 66.7% 1.2%);
+      --color-success: hsl(115 77.5% 27.8%);
+      --color-success-low: hsl(115 77.5% 27.8% / 0.18);
+      --color-success-medium: hsl(115 77.5% 27.8% / 0.6);
+      --color-success-frosted: hsl(115 77.5% 27.8% / 0.18);
+      --color-success-frosted-soft: hsl(115 77.5% 27.8% / 0.1);
+      --color-warning: hsl(28 97.7% 34.1%);
+      --color-warning-low: hsl(28 97.7% 34.1% / 0.18);
+      --color-warning-medium: hsl(28 97.7% 34.1% / 0.6);
+      --color-warning-frosted: hsl(28 97.7% 34.1% / 0.18);
+      --color-warning-frosted-soft: hsl(28 97.7% 34.1% / 0.1);
+      --color-error: hsl(357 78% 41%);
+      --color-error-low: hsl(357 78% 41% / 0.18);
+      --color-error-medium: hsl(357 78% 41% / 0.6);
+      --color-error-frosted: hsl(357 78% 41% / 0.18);
+      --color-error-frosted-soft: hsl(357 78% 41% / 0.1);
+      --color-info: hsl(228 83.2% 51%);
+      --color-info-low: hsl(228 83.2% 51% / 0.18);
+      --color-info-medium: hsl(228 83.2% 51% / 0.6);
+      --color-info-frosted: hsl(228 83.2% 51% / 0.18);
+      --color-info-frosted-soft: hsl(228 83.2% 51% / 0.1);
     }
 
     .scheme-dark,
     .scheme-only-dark {
       --color-focus: #1a44ea;
-      --color-canvas: hsl(225, 66.7%, 1.2%);
-      --color-surface: hsl(240, 2%, 10%);
-      --color-frosted: hsla(240, 2%, 43%, 0.228);
-      --color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
-      --color-frosted-strong: hsla(240, 1.5%, 61.8%, 0.302);
-      --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
-      --color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
-      --color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
-      --color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
-      --color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
-      --color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
-      --color-primary: hsl(225, 100%, 99%);
-      --color-success: hsl(157, 84.9%, 41.6%);
-      --color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
-      --color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
-      --color-success-frosted: hsla(157, 84.9%, 41.6%, 0.26);
-      --color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
-      --color-warning: hsl(28, 90.2%, 56.1%);
-      --color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
-      --color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
-      --color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.26);
-      --color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
-      --color-error: hsl(0, 96.9%, 62%);
-      --color-error-low: hsla(0, 96.9%, 62%, 0.18);
-      --color-error-medium: hsla(0, 96.9%, 62%, 0.6);
-      --color-error-frosted: hsla(0, 96.9%, 62%, 0.26);
-      --color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
-      --color-info: hsl(210, 100%, 54.5%);
-      --color-info-low: hsla(210, 100%, 54.5%, 0.18);
-      --color-info-medium: hsla(210, 100%, 54.5%, 0.6);
-      --color-info-frosted: hsla(210, 100%, 54.5%, 0.26);
-      --color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
+      --color-canvas: hsl(225 66.7% 1.2%);
+      --color-surface: hsl(240 2% 10%);
+      --color-frosted: hsl(240 2% 43% / 0.228);
+      --color-frosted-soft: hsl(240 3.7% 26.5% / 0.154);
+      --color-frosted-strong: hsl(240 1.5% 61.8% / 0.302);
+      --color-backdrop: hsl(240 5.3% 14.9% / 0.5);
+      --color-contrast-lower: hsl(240 1.5% 61.8% / 0.302);
+      --color-contrast-low: hsl(240 12.5% 96.9% / 0.45);
+      --color-contrast-medium: hsl(240 12.5% 96.9% / 0.56);
+      --color-contrast-high: hsl(240 12.5% 96.9% / 0.67);
+      --color-contrast-higher: hsl(240 12.5% 96.9% / 0.78);
+      --color-primary: hsl(225 100% 99%);
+      --color-success: hsl(157 84.9% 41.6%);
+      --color-success-low: hsl(157 84.9% 41.6% / 0.18);
+      --color-success-medium: hsl(157 84.9% 41.6% / 0.6);
+      --color-success-frosted: hsl(157 84.9% 41.6% / 0.26);
+      --color-success-frosted-soft: hsl(157 84.9% 41.6% / 0.1);
+      --color-warning: hsl(28 90.2% 56.1%);
+      --color-warning-low: hsl(28 90.2% 56.1% / 0.18);
+      --color-warning-medium: hsl(28 90.2% 56.1% / 0.6);
+      --color-warning-frosted: hsl(28 90.2% 56.1% / 0.26);
+      --color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
+      --color-error: hsl(0 96.9% 62%);
+      --color-error-low: hsl(0 96.9% 62% / 0.18);
+      --color-error-medium: hsl(0 96.9% 62% / 0.6);
+      --color-error-frosted: hsl(0 96.9% 62% / 0.26);
+      --color-error-frosted-soft: hsl(0 96.9% 62% / 0.1);
+      --color-info: hsl(210 100% 54.5%);
+      --color-info-low: hsl(210 100% 54.5% / 0.18);
+      --color-info-medium: hsl(210 100% 54.5% / 0.6);
+      --color-info-frosted: hsl(210 100% 54.5% / 0.26);
+      --color-info-frosted-soft: hsl(210 100% 54.5% / 0.1);
     }
 
     @media (prefers-color-scheme: dark) {
       .scheme-light-dark {
         --color-focus: #1a44ea;
-        --color-canvas: hsl(225, 66.7%, 1.2%);
-        --color-surface: hsl(240, 2%, 10%);
-        --color-frosted: hsla(240, 2%, 43%, 0.228);
-        --color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
-        --color-frosted-strong: hsla(240, 1.5%, 61.8%, 0.302);
-        --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
-        --color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
-        --color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
-        --color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
-        --color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
-        --color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
-        --color-primary: hsl(225, 100%, 99%);
-        --color-success: hsl(157, 84.9%, 41.6%);
-        --color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
-        --color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
-        --color-success-frosted: hsla(157, 84.9%, 41.6%, 0.26);
-        --color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
-        --color-warning: hsl(28, 90.2%, 56.1%);
-        --color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
-        --color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
-        --color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.26);
-        --color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
-        --color-error: hsl(0, 96.9%, 62%);
-        --color-error-low: hsla(0, 96.9%, 62%, 0.18);
-        --color-error-medium: hsla(0, 96.9%, 62%, 0.6);
-        --color-error-frosted: hsla(0, 96.9%, 62%, 0.26);
-        --color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
-        --color-info: hsl(210, 100%, 54.5%);
-        --color-info-low: hsla(210, 100%, 54.5%, 0.18);
-        --color-info-medium: hsla(210, 100%, 54.5%, 0.6);
-        --color-info-frosted: hsla(210, 100%, 54.5%, 0.26);
-        --color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
+        --color-canvas: hsl(225 66.7% 1.2%);
+        --color-surface: hsl(240 2% 10%);
+        --color-frosted: hsl(240 2% 43% / 0.228);
+        --color-frosted-soft: hsl(240 3.7% 26.5% / 0.154);
+        --color-frosted-strong: hsl(240 1.5% 61.8% / 0.302);
+        --color-backdrop: hsl(240 5.3% 14.9% / 0.5);
+        --color-contrast-lower: hsl(240 1.5% 61.8% / 0.302);
+        --color-contrast-low: hsl(240 12.5% 96.9% / 0.45);
+        --color-contrast-medium: hsl(240 12.5% 96.9% / 0.56);
+        --color-contrast-high: hsl(240 12.5% 96.9% / 0.67);
+        --color-contrast-higher: hsl(240 12.5% 96.9% / 0.78);
+        --color-primary: hsl(225 100% 99%);
+        --color-success: hsl(157 84.9% 41.6%);
+        --color-success-low: hsl(157 84.9% 41.6% / 0.18);
+        --color-success-medium: hsl(157 84.9% 41.6% / 0.6);
+        --color-success-frosted: hsl(157 84.9% 41.6% / 0.26);
+        --color-success-frosted-soft: hsl(157 84.9% 41.6% / 0.1);
+        --color-warning: hsl(28 90.2% 56.1%);
+        --color-warning-low: hsl(28 90.2% 56.1% / 0.18);
+        --color-warning-medium: hsl(28 90.2% 56.1% / 0.6);
+        --color-warning-frosted: hsl(28 90.2% 56.1% / 0.26);
+        --color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
+        --color-error: hsl(0 96.9% 62%);
+        --color-error-low: hsl(0 96.9% 62% / 0.18);
+        --color-error-medium: hsl(0 96.9% 62% / 0.6);
+        --color-error-frosted: hsl(0 96.9% 62% / 0.26);
+        --color-error-frosted-soft: hsl(0 96.9% 62% / 0.1);
+        --color-info: hsl(210 100% 54.5%);
+        --color-info-low: hsl(210 100% 54.5% / 0.18);
+        --color-info-medium: hsl(210 100% 54.5% / 0.6);
+        --color-info-frosted: hsl(210 100% 54.5% / 0.26);
+        --color-info-frosted-soft: hsl(210 100% 54.5% / 0.1);
       }
     }
   }
@@ -492,7 +495,7 @@
 
 /* Typography: Heading */
 @utility prose-heading-sm {
-  @apply font-porsche-next not-italic font-normal text-sm text-primary;
+  @apply font-porsche-next not-italic font-semibold text-sm text-primary;
 }
 @utility prose-heading-md {
   @apply font-porsche-next not-italic font-normal text-md text-primary;
@@ -506,14 +509,23 @@
 @utility prose-heading-2xl {
   @apply font-porsche-next not-italic font-normal text-2xl text-primary;
 }
+@utility prose-heading-3xl {
+  @apply font-porsche-next not-italic font-normal text-3xl text-primary;
+}
+@utility prose-heading-4xl {
+  @apply font-porsche-next not-italic font-normal text-4xl text-primary;
+}
+@utility prose-heading-5xl {
+  @apply font-porsche-next not-italic font-normal text-5xl text-primary;
+}
 
 /* Typography: Display */
 @utility prose-display-sm {
-  @apply font-porsche-next not-italic font-normal leading-normal text-primary text-[clamp(1.8rem,2.41vw+1.32rem,4.21rem)];
+  @apply font-porsche-next not-italic font-normal leading-normal text-primary text-3xl;
 }
 @utility prose-display-md {
-  @apply font-porsche-next not-italic font-normal leading-normal text-primary text-[clamp(2.03rem,3.58vw+1.31rem,5.61rem)];
+  @apply font-porsche-next not-italic font-normal leading-normal text-primary text-4xl;
 }
 @utility prose-display-lg {
-  @apply font-porsche-next not-italic font-normal leading-normal text-primary text-[clamp(2.28rem,5.2vw+1.24rem,7.48rem)];
+  @apply font-porsche-next not-italic font-normal leading-normal text-primary text-5xl;
 }