feat(SW-252): wrap image for layout

components/HotelReservation/HotelCard/hotelCard.module.css

@@ -12,26 +12,27 @@
   width: 307px;
 }
 
-.header {
-  grid-area: header;
+.imageContainer {
+  grid-area: image;
+}
+
+.tripAdvisor {
+  display: none;
 }
 
 .image {
   height: 100%;
-  max-height: 95px;
   width: 116px;
   object-fit: cover;
-  grid-area: image;
 }
 
-.logo {
-  margin-bottom: var(--Spacing-x-half);
+.header {
+  grid-area: header;
 }
 
 .hotel {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
   grid-area: hotel;
 }
 
@@ -49,7 +50,7 @@
 
 .link {
   display: flex;
-  padding: var(--Spacing-x1) var(--Spacing-x0);
+  padding: var(--Spacing-x2) var(--Spacing-x0);
   border-bottom: 1px solid var(--Base-Border-Subtle);
 }
 
@@ -67,7 +68,7 @@
 }
 
 .button {
-  display: none;
+  justify-content: center;
 }
 
 @media screen and (min-width: 1367px) {
@@ -81,8 +82,18 @@
     padding: 0;
   }
 
+  .imageContainer {
+    position: relative;
+  }
+
+  .tripAdvisor {
+    display: block;
+    position: absolute;
+    left: 7px;
+    top: 7px;
+  }
+
   .image {
-    max-height: 100%;
     width: 518px;
   }
 
@@ -92,11 +103,14 @@
   }
 
   .hotel {
+    gap: var(--Spacing-x2);
     padding-right: var(--Spacing-x2);
   }
 
   .prices {
     flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
     padding-right: var(--Spacing-x2);
     padding-bottom: var(--Spacing-x2);
   }
@@ -106,8 +120,6 @@
   }
 
   .button {
-    display: flex;
     width: 160px;
-    justify-content: center;
   }
 }