fix(LOY-260): use same phone component in signup and edit profile as enter details

remove old select from edit profile

update typography

apps/scandic-web/components/Forms/Signup/form.module.css

@@ -1,52 +1,61 @@
 .form {
   display: grid;
-  gap: var(--Spacing-x5);
-  grid-area: form;
-}
-
-.title {
-  grid-area: title;
-}
-
-.formWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x5);
 }
 
+.formWrapper,
 .userInfo,
-.password,
-.terms {
-  align-self: flex-start;
+.password {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x3);
 }
 
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x3);
+.container,
+.terms {
+  display: grid;
+  gap: var(--Space-x2);
 }
 
 .nameInputs {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .dateField {
   display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 @media screen and (min-width: 1367px) {
   .formWrapper {
-    gap: var(--Spacing-x5);
+    gap: var(--Space-x5);
   }
 
   .nameInputs {
     grid-template-columns: 1fr 1fr;
   }
 
+  .additional {
+    grid-template-columns: 2fr 5fr;
+    grid-template-areas:
+      "zip country"
+      "email email"
+      "phone phone";
+
+    & > div:nth-child(1) {
+      grid-area: zip;
+    }
+    & > div:nth-child(2) {
+      grid-area: country;
+    }
+    & > div:nth-child(3) {
+      grid-area: email;
+    }
+    & > div:nth-child(4) {
+      grid-area: phone;
+    }
+  }
+
   .signUpButton {
     width: fit-content;
   }