feat(SW-252): add new ux

components/HotelReservation/HotelCard/hotelCard.module.css

@@ -1,76 +1,111 @@
 .card {
   display: grid;
+  grid-template-areas:
+    "image header"
+    "hotel hotel"
+    "prices prices";
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x2);
   background-color: var(--Base-Surface-Primary-light-Normal);
   border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-Small);
-  overflow: hidden;
-  height: 460px;
-  width: 480px;
+  border-radius: var(--Corner-radius-Medium);
+  width: 100%;
+  max-width: 307px;
+}
+
+.header {
+  grid-area: header;
 }
 
 .image {
-  height: auto;
-  max-height: 180px;
+  height: 100%;
+  max-height: 95px;
+  width: 116px;
   object-fit: cover;
-  width: 100%;
+  grid-area: image;
 }
 
-.information {
+.logo {
+  margin-bottom: var(--Spacing-x-half);
+}
+
+.hotel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+  grid-area: hotel;
+}
+
+.facilities {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--Spacing-x-half);
+}
+
+.link {
+  display: flex;
+  padding: var(--Spacing-x1) var(--Spacing-x0);
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+}
+
+.prices {
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x2);
-  padding: var(--Spacing-x2);
+  grid-area: prices;
 }
 
-.title {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x1);
-}
-
-.description {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x1);
-  font-family: var(--typography-Caption-Regular-fontFamily);
-  font-size: var(--typography-Caption-Regular-fontSize);
-}
-
-.chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--Spacing-x1);
-}
-
-.booking {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--Spacing-x1);
+.public,
+.member {
+  max-width: fit-content;
+  margin-bottom: var(--Spacing-x-half);
 }
 
 .button {
-  width: 100%;
-  justify-content: center;
+  display: none;
 }
 
 @media screen and (min-width: 1367px) {
   .card {
-    grid-template-columns: 1fr min(480px);
-    height: 285px;
-    width: 850px;
+    grid-template-areas:
+      "image header"
+      "image hotel"
+      "image prices";
+    grid-template-columns: auto-fill;
+    overflow: hidden;
+    width: 100%;
+    max-width: 1050px;
+    padding: 0;
   }
 
   .image {
-    min-height: 285px;
+    max-height: 100%;
+    width: 100%;
+    max-width: 518px;
   }
 
-  .booking {
-    justify-content: space-between;
-    flex-direction: row-reverse;
+  .header {
+    padding-top: var(--Spacing-x2);
+    padding-right: var(--Spacing-x2);
+  }
+
+  .hotel {
+    padding-right: var(--Spacing-x2);
+  }
+
+  .prices {
+    flex-direction: row;
+    padding-right: var(--Spacing-x2);
+    padding-bottom: var(--Spacing-x2);
+  }
+
+  .link {
+    border-bottom: none;
   }
 
   .button {
-    width: auto;
+    display: flex;
+    width: 160px;
+    justify-content: center;
   }
 }