feat(SW-243): make section responsive

components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css

@@ -1,4 +1,4 @@
-.test {
+.section {
   display: flex;
   width: 100%;
   background-color: var(--Base-Surface-Primary-light-Normal);
@@ -15,7 +15,6 @@
 
 .info {
   display: flex;
-  flex: 1;
   flex-direction: column;
   gap: var(--Spacing-x1);
   padding: var(--Spacing-x2);
@@ -23,12 +22,7 @@
   font-size: var(--typography-Caption-Regular-fontSize);
 }
 
-.hotel {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x-half);
-}
-
+.hotel,
 .stay {
   display: flex;
   flex-direction: column;
@@ -38,3 +32,26 @@
   display: flex;
   align-items: center;
 }
+
+@media screen and (min-width: 1367px) {
+  .section {
+    flex-direction: column;
+  }
+  .image {
+    max-width: 100%;
+    height: 100%;
+    max-height: 195px;
+  }
+
+  .info {
+    flex-direction: row;
+    justify-content: space-between;
+    gap: var(--Spacing-x4);
+  }
+
+  .hotel,
+  .stay {
+    width: 100%;
+    max-width: 230px;
+  }
+}

components/HotelReservation/BookingConfirmation/ConfirmationCard/index.tsx

@@ -6,7 +6,7 @@ import styles from "./confirmationCard.module.css"
 
 export default function ConfirmationCard() {
   return (
-    <section className={styles.test}>
+    <section className={styles.section}>
       <div>
         <Image
           src="https://test3.scandichotels.com/imagevault/publishedmedia/i11isd60bh119s9486b7/downtown-camper-by-scandic-lobby-reception-desk-ch.jpg?w=640"
@@ -17,13 +17,11 @@ export default function ConfirmationCard() {
         />
       </div>
       <div className={styles.info}>
-        <header>
+        <div className={styles.hotel}>
           <ScandicLogoIcon color="red" />
           <Title as="h5" textTransform="capitalize">
             Helsinki Hub
           </Title>
-        </header>
-        <div className={styles.hotel}>
           <span>Kaisaniemenkatu 7, Helsinki</span>
           <span>Call us at +358 300 870680</span>
         </div>