Merged in fix/BOOK-429-image-meeting-card (pull request #3364)

fix(BOOK-429): adjust image layout for meeting room cards

* fix(BOOK-429): adjust image layout for meeting room cards


Approved-by: Matilda Haneling
Approved-by: Anton Gunnarsson
Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/hotelListingItem.module.css

@@ -8,8 +8,14 @@
 
 .image {
   width: 100%;
-  height: 200px;
+  height: 100%;
   object-fit: cover;
+  border-radius: inherit;
+}
+
+.imageWrapper {
+  position: relative;
+  height: 200px;
 }
 
 .content {
@@ -41,7 +47,7 @@
     grid-template-columns: minmax(250px, 350px) auto;
   }
 
-  .image {
+  .imageWrapper {
     height: 100%;
   }
 

apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx

@@ -43,18 +43,20 @@ export default async function HotelListingItem({
 
   return (
     <article className={styles.container}>
-      {image?.src ? (
-        <Image
-          src={image.src}
-          alt={image.altText || image.altText_En}
-          width={400}
-          height={300}
-          sizes="(min-width: 768px) 400px, 100vw"
-          className={styles.image}
-        />
-      ) : (
-        <ImageFallback className={styles.image} />
-      )}
+      <div className={styles.imageWrapper}>
+        {image?.src ? (
+          <Image
+            src={image.src}
+            alt={image.altText || image.altText_En}
+            fill
+            sizes="(min-width: 768px) 700px, 100vw"
+            className={styles.image}
+          />
+        ) : (
+          <ImageFallback className={styles.image} />
+        )}
+      </div>
+
       <section className={styles.content}>
         <div className={styles.intro}>
           <HotelLogoIcon hotelId={id} hotelType={hotelType} />