From 51285f359f91f69210ceaeb67e9ee51728626a0a Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Tue, 27 Aug 2024 09:44:47 +0200
Subject: [PATCH] feat(SW-252): change semantic element

---
 .../HotelReservation/HotelCard/hotelCard.module.css       | 6 +++---
 components/HotelReservation/HotelCard/index.tsx           | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

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 (
     <article className={styles.card}>
-      <div className={styles.imageContainer}>
+      <section className={styles.imageContainer}>
         <Image
           src={hotel.hotelContent.images.imageSizes.large}
           alt={hotel.hotelContent.images.metaData.altText}
@@ -41,8 +41,8 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
             {hotel.ratings?.tripAdvisor.rating}
           </Chip>
         </div>
-      </div>
-      <header className={styles.header}>
+      </section>
+      <section className={styles.hotelInformation}>
         <ScandicLogoIcon color="red" />
         <Title as="h4" textTransform="capitalize">
           {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) => {