From 42197b5ad27004c90c389a91132c431f614bf1c9 Mon Sep 17 00:00:00 2001
From: Bianca Widstam <bianca.widstam@scandichotels.com>
Date: Wed, 17 Dec 2025 13:05:49 +0000
Subject: [PATCH] Merged in fix/BOOK-429-image-meeting-card (pull request
 #3364)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../hotelListingItem.module.css               | 10 +++++--
 .../HotelListing/HotelListingItem/index.tsx   | 26 ++++++++++---------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/hotelListingItem.module.css b/apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/hotelListingItem.module.css
index cb1f3a3d4..a86d5165a 100644
--- a/apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/hotelListingItem.module.css
+++ b/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%;
   }
 
diff --git a/apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx b/apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx
index 65533d1a7..60335aea6 100644
--- a/apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx
+++ b/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} />