Merged in fix/SW-3325-hotelcard-mobile-show-alert-left-align (pull request #2725)

fix(SW-3325): show alert in hotel card mobile and left align text

* fix(SW-3325): show alert in hotel card mobile and left align text


Approved-by: Joakim Jäderberg

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

@@ -45,17 +45,19 @@
 .hotelAddressDescription {
   display: flex;
   flex-direction: column;
-  gap: var(--Space-x2);
+  gap: var(--Space-x15);
   align-items: center;
   text-align: center;
 }
 
-.hotelAlert {
+.facilities {
   display: none;
 }
 
-.facilities {
-  display: none;
+.hotelAlert {
+  max-width: var(--max-width-page);
+  margin: 0 auto;
+  padding-top: var(--Space-x15);
 }
 
 @media screen and (min-width: 768px) {
@@ -72,13 +74,6 @@
     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;
@@ -89,11 +84,11 @@
 
   .facilityList {
     display: flex;
+    flex-direction: column;
     align-items: flex-start;
     justify-content: center;
     flex-wrap: wrap;
-    gap: var(--Space-x15);
-    padding-bottom: var(--Space-x1);
+    gap: var(--Space-x1);
   }
 
   .facilitiesItem {
@@ -107,8 +102,8 @@
   }
 
   .hotelContent {
+    flex-direction: row;
     gap: var(--Space-x6);
-    align-items: normal;
   }
 
   .hotelInformation {
@@ -121,6 +116,7 @@
   .hotelAddressDescription {
     align-items: normal;
     text-align: left;
+    gap: var(--Space-x2);
   }
 
   .wrapper {
@@ -128,22 +124,10 @@
     flex-direction: row;
   }
 
-  .facilities {
-    padding: var(--Space-x3) var(--Space-x3) var(--Space-x05);
-  }
-
-  .facilityList {
-    gap: var(--Space-x1);
-    padding-bottom: var(--Space-x05);
-    flex-direction: column;
-  }
   .facilityTitle {
     display: none;
   }
-  .hotelContent {
-    flex-direction: row;
-    align-items: center;
-  }
+
   .imageWrapper {
     align-self: center;
   }