fix: responsivity of fields and order of signup form

components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -66,7 +66,7 @@ export default function SectionAccordion({
   const textColor =
     isComplete || isOpen ? "uiTextHighContrast" : "baseTextDisabled"
   return (
-    <section className={styles.wrapper} data-open={isOpen} data-step={step}>
+    <div className={styles.main} data-open={isOpen} data-step={step}>
       <div className={styles.iconWrapper}>
         <div className={styles.circle} data-checked={isComplete}>
           {isComplete ? (
@@ -74,31 +74,27 @@ export default function SectionAccordion({
           ) : null}
         </div>
       </div>
-      <div className={styles.main}>
-        <header>
-          <button onClick={onModify} className={styles.modifyButton}>
-            <Footnote
-              className={styles.title}
-              asChild
-              textTransform="uppercase"
-              type="label"
-              color={textColor}
-            >
-              <h2>{header}</h2>
-            </Footnote>
-            <Subtitle className={styles.selection} type="two" color={textColor}>
-              {title}
-            </Subtitle>
+      <header className={styles.header}>
+        <button onClick={onModify} className={styles.modifyButton}>
+          <Footnote
+            className={styles.title}
+            asChild
+            textTransform="uppercase"
+            type="label"
+            color={textColor}
+          >
+            <h2>{header}</h2>
+          </Footnote>
+          <Subtitle className={styles.selection} type="two" color={textColor}>
+            {title}
+          </Subtitle>
 
-            {isComplete && !isOpen && (
-              <ChevronDownIcon className={styles.button} color="burgundy" />
-            )}
-          </button>
-        </header>
-        <div className={styles.content}>
-          <div className={styles.contentWrapper}>{children}</div>
-        </div>
-      </div>
-    </section>
+          {isComplete && !isOpen && (
+            <ChevronDownIcon className={styles.button} color="burgundy" />
+          )}
+        </button>
+      </header>
+      <div className={styles.content}>{children}</div>
+    </div>
   )
 }