fix: remove custom style and add tiltedMedium variant

components/ContentType/HotelPage/IntroSection/index.tsx

@@ -36,7 +36,7 @@ export default async function IntroSection({
     <section className={styles.introSection}>
       <div className={styles.mainContent}>
         <div className={styles.titleContainer}>
-          <BiroScript className={styles.welcomeLabel} color="red">
+          <BiroScript tilted="medium" color="red">
             {formatMessage({ id: "Welcome to" })}:
           </BiroScript>
           <Title level="h2">{hotelName}</Title>

components/ContentType/HotelPage/IntroSection/introSection.module.css

@@ -14,10 +14,6 @@
   gap: var(--Spacing-x-one-and-half);
 }
 
-.welcomeLabel {
-  transform: rotate(-4deg) translate(0px, -15px);
-}
-
 .introLink {
   text-decoration-color: var(--Scandic-Peach-80);
   width: fit-content;

components/TempDesignSystem/Text/BiroScript/biroScript.module.css

@@ -30,6 +30,10 @@
   transform: rotate(-2deg);
 }
 
+.tiltedMedium {
+  transform: rotate(-4deg) translate(0px, -15px);
+}
+
 .tiltedLarge {
   transform: rotate(-13deg) translate(0px, -15px);
 }

components/TempDesignSystem/Text/BiroScript/variants.ts

@@ -22,6 +22,7 @@ const config = {
     },
     tilted: {
       small: styles.tiltedSmall,
+      medium: styles.tiltedMedium,
       large: styles.tiltedLarge,
     },
   },