feat: add mobile design

components/HotelReservation/SelectHotel/HotelCard/hotelCard.module.css

@@ -1,16 +1,14 @@
 .card {
   display: grid;
-  grid-template-columns: 1fr min(480px);
-  min-height: 270px;
-  max-width: 850px;
   background-color: var(--Base-Surface-Primary-Normal);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Small);
+  min-height: 460px;
 }
 
 .image {
   height: auto;
-  min-height: 270px;
+  min-height: 160px;
   object-fit: cover;
   overflow: hidden;
   width: 100%;
@@ -43,8 +41,35 @@
   gap: var(--Spacing-x1);
 }
 
-.button {
+.book {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: space-between;
+  gap: var(--Spacing-x1);
+}
+
+.button {
+  width: 100%;
+  justify-content: center;
+}
+
+@media screen and (min-width: 850px) {
+  .card {
+    grid-template-columns: 1fr min(480px);
+    min-height: 270px;
+    max-width: 850px;
+  }
+
+  .image {
+    min-height: 270px;
+  }
+
+  .book {
+    justify-content: space-between;
+    flex-direction: row-reverse;
+  }
+
+  .button {
+    width: auto;
+  }
 }