feat: Add mobile dropdown variant for Link component

components/TempDesignSystem/Link/link.module.css

@@ -29,6 +29,33 @@
   text-decoration: underline;
 }
 
+.myPageMobileDropdown {
+  color: var(--Scandic-Brand-Burgundy);
+  font-family: var(--typography-Body-Regular-fontFamily);
+  font-size: var(--typography-Body-Regular-fontSize);
+  line-height: var(--typography-Body-Regular-lineHeight);
+  letter-spacing: 0.096px;
+  padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1)
+    var(--Spacing-x-one-and-half);
+  width: 100%;
+  border-radius: var(--Corner-radius-Medium);
+  gap: 4px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+}
+
+.myPageMobileDropdown.active {
+  background-color: var(--Scandic-Brand-Pale-Peach);
+  border-radius: var(--Corner-radius-Medium);
+  font-family: var(--typography-Body-Underlined-fontFamily);
+  font-size: var(--typography-Body-Underlined-fontSize);
+  font-weight: var(--typography-Body-Underlined-fontWeight);
+  letter-spacing: var(--typography-Body-Underlined-letterSpacing);
+  line-height: var(--typography-Body-Underlined-lineHeight);
+}
+
 .shortcut {
   align-items: center;
   border-bottom: 0.5px solid var(--Scandic-Beige-20);

components/TempDesignSystem/Link/variants.ts

@@ -23,6 +23,7 @@ export const linkVariants = cva(styles.link, {
       default: styles.default,
       icon: styles.icon,
       myPage: styles.myPage,
+      myPageMobileDropdown: styles.myPageMobileDropdown,
       shortcut: styles.shortcut,
       sidebar: styles.sidebar,
     },

components/TempDesignSystem/Text/Title/title.module.css

@@ -69,7 +69,7 @@
 }
 
 .capitalize {
-  text-transform: uppercase;
+  text-transform: capitalize;
 }
 
 .regular {