diff --git a/components/HotelReservation/SelectHotel/HotelCard/hotelCard.module.css b/components/HotelReservation/SelectHotel/HotelCard/hotelCard.module.css index 2cc7756e0..f2480dd96 100644 --- a/components/HotelReservation/SelectHotel/HotelCard/hotelCard.module.css +++ b/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; + } } diff --git a/components/HotelReservation/SelectHotel/HotelCard/index.tsx b/components/HotelReservation/SelectHotel/HotelCard/index.tsx index 3b9190b7e..c62ed321f 100644 --- a/components/HotelReservation/SelectHotel/HotelCard/index.tsx +++ b/components/HotelReservation/SelectHotel/HotelCard/index.tsx @@ -35,13 +35,18 @@ export default function HotelCard() { {value} ))} -
+
+ Only 4 rooms left -