fix: add mobile design for details form

components/HotelReservation/EnterDetails/Details/details.module.css

@@ -1,11 +1,12 @@
 .form {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x3) 0px;
 }
 
 .container {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Spacing-x1);
   grid-template-columns: 1fr 1fr;
   width: min(100%, 600px);
 }
@@ -23,3 +24,30 @@
   justify-items: flex-start;
   margin-top: var(--Spacing-x1);
 }
+
+@media screen and (min-width: 1367px) {
+  .form {
+    gap: var(--Spacing-x2);
+    padding: var(--Spacing-x3) 0px;
+  }
+
+  .container {
+    gap: var(--Spacing-x2);
+    grid-template-columns: 1fr 1fr;
+    width: min(100%, 600px);
+  }
+
+  .country,
+  .email,
+  .membershipNo,
+  .phone {
+    grid-column: 1/-1;
+  }
+
+  .footer {
+    display: grid;
+    gap: var(--Spacing-x3);
+    justify-items: flex-start;
+    margin-top: var(--Spacing-x1);
+  }
+}

components/TempDesignSystem/Form/Checkbox/checkbox.module.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   color: var(--text-color);
+  cursor: pointer;
 }
 
 .container[data-selected] .checkbox {

components/TempDesignSystem/Form/JoinScandicFriendsCard/index.tsx

@@ -34,9 +34,9 @@ export default function JoinScandicFriendsCard({
   ]
 
   return (
-    <label className={styles.cardContainer}>
+    <div className={styles.cardContainer}>
       <header className={styles.header}>
-        <Checkbox name={name} className={styles.checkBox} />
+        <Checkbox name={name} className={styles.checkBox}>
           <div>
             <Caption type="label" textTransform="uppercase" color="red">
               {intl.formatMessage(
@@ -57,6 +57,8 @@ export default function JoinScandicFriendsCard({
               {intl.formatMessage({ id: "Join Scandic Friends" })}
             </Caption>
           </div>
+        </Checkbox>
+
         <Footnote color="uiTextHighContrast">
           {intl.formatMessage({ id: "Already a friend?" })}{" "}
           <LoginButton
@@ -103,6 +105,6 @@ export default function JoinScandicFriendsCard({
           }
         )}
       </Footnote>
-    </label>
+    </div>
   )
 }

components/TempDesignSystem/Form/JoinScandicFriendsCard/joinScandicFriendsCard.module.css

@@ -4,7 +4,6 @@
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Large);
   display: grid;
-  cursor: pointer;
   gap: var(--Spacing-x2);
   padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
   width: min(100%, 600px);
@@ -13,7 +12,7 @@
 .header {
   display: grid;
   gap: var(--Spacing-x-one-and-half);
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: 1fr auto;
 }
 
 .checkBox {