Merged in fix/SW-2629-hotelCard-new-design-mobile (pull request #2132)

fix(SW-2629): add new design for mobile

* fix(SW-2629): add new design for mobile

* fix(SW-2629): remove redundant brackets

* fix(SW-2629): pr comments

* fix(SW-2629): hydration error


Approved-by: Christian Andolf

apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css

@@ -1,21 +1,29 @@
 .container {
   background-color: var(--Base-Surface-Subtle-Normal);
-  padding: var(--Spacing-x3) 0;
+  padding: var(--Space-x3) 0;
 }
 
+.hotelName {
+  color: var(--Text-Heading);
+}
+
+.hotelAddress {
+  color: var(--Text-Tertiary);
+}
 .wrapper {
   display: flex;
   margin: 0 auto;
   max-width: var(--max-width-page);
   position: relative;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
+}
+.hotelDescription {
+  display: none;
 }
-
 .imageWrapper {
   position: relative;
   height: 200px;
-  max-width: 360px;
   width: 100%;
   border-radius: var(--Corner-radius-md);
 }
@@ -23,77 +31,111 @@
 .hotelContent {
   display: flex;
   flex-direction: column;
+  align-items: center;
 }
 
 .hotelInformation {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
-  width: min(607px, 100%);
+  gap: var(--Space-x1);
+  align-items: center;
+  text-align: center;
 }
 
 .hotelAddressDescription {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
-}
-
-.facilities {
-  padding: var(--Spacing-x3) 0 var(--Spacing-x-quarter);
-  gap: var(--Spacing-x-one-and-half);
-}
-
-.facilityList {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--Spacing-x-one-and-half);
-  padding-bottom: var(--Spacing-x1);
-}
-
-.facilitiesItem {
-  display: flex;
+  gap: var(--Space-x2);
   align-items: center;
-  gap: var(--Spacing-x1);
+  text-align: center;
 }
 
 .hotelAlert {
-  max-width: var(--max-width-page);
-  margin: 0 auto;
-  padding-top: var(--Spacing-x-one-and-half);
+  display: none;
+}
+
+.facilities {
+  display: none;
 }
 
 @media screen and (min-width: 768px) {
   .container {
-    padding: var(--Spacing-x4) 0;
+    padding: var(--Space-x4) 0;
   }
 }
 
 @media screen and (min-width: 1367px) {
   .container {
-    padding: var(--Spacing-x4) var(--Spacing-x5);
+    padding: var(--Space-x4) var(--Space-x5);
+  }
+  .hotelDescription {
+    display: block;
+  }
+
+  .hotelAlert {
+    display: block;
+    max-width: var(--max-width-page);
+    margin: 0 auto;
+    padding-top: var(--Space-x15);
+  }
+
+  .facilities {
+    display: flex;
+    flex-direction: column;
+    padding: var(--Space-x3) 0 var(--Space-x025);
+    gap: var(--Space-x15);
+    align-items: center;
+  }
+
+  .facilityList {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: var(--Space-x15);
+    padding-bottom: var(--Space-x1);
+  }
+
+  .facilitiesItem {
+    display: flex;
+    align-items: center;
+    gap: var(--Space-x1);
+  }
+
+  .imageWrapper {
+    max-width: 360px;
   }
 
   .hotelContent {
-    gap: var(--Spacing-x6);
+    gap: var(--Space-x6);
+    align-items: normal;
   }
 
   .hotelInformation {
-    padding-right: var(--Spacing-x3);
+    padding-right: var(--Space-x3);
+    width: min(607px, 100%);
+    align-items: normal;
+    text-align: left;
+  }
+
+  .hotelAddressDescription {
+    align-items: normal;
+    text-align: left;
   }
 
   .wrapper {
-    gap: var(--Spacing-x3);
+    gap: var(--Space-x3);
     flex-direction: row;
   }
 
   .facilities {
-    padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x-half);
+    padding: var(--Space-x3) var(--Space-x3) var(--Space-x05);
   }
 
   .facilityList {
-    gap: var(--Spacing-x1);
-    padding-bottom: var(--Spacing-x-half);
+    gap: var(--Space-x1);
+    padding-bottom: var(--Space-x05);
+    flex-direction: column;
   }
   .facilityTitle {
     display: none;