feat(SW-252): change semantic element

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);
   }

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) => {