diff --git a/components/HotelReservation/HotelCard/hotelCard.module.css b/components/HotelReservation/HotelCard/hotelCard.module.css index 159207d78..3db576744 100644 --- a/components/HotelReservation/HotelCard/hotelCard.module.css +++ b/components/HotelReservation/HotelCard/hotelCard.module.css @@ -26,7 +26,7 @@ object-fit: cover; } -.header { +.hotelInformation { grid-area: header; } @@ -87,8 +87,8 @@ } .tripAdvisor { - display: block; position: absolute; + display: block; left: 7px; top: 7px; } @@ -97,7 +97,7 @@ width: 518px; } - .header { + .hotelInformation { padding-top: var(--Spacing-x2); padding-right: var(--Spacing-x2); } diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx index c4721abb5..c294e5c0d 100644 --- a/components/HotelReservation/HotelCard/index.tsx +++ b/components/HotelReservation/HotelCard/index.tsx @@ -27,7 +27,7 @@ export default async function HotelCard({ hotel }: HotelCardProps) { return (
-
+
{hotel.hotelContent.images.metaData.altText}
- -
+ +
{hotel.name} @@ -53,7 +53,7 @@ export default async function HotelCard({ hotel }: HotelCardProps) { <Footnote color="textMediumContrast"> {`${hotel.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`} </Footnote> - </header> + </section> <section className={styles.hotel}> <div className={styles.facilities}> {sortedAmenities.map((facility) => {