From e9dd2b3738bb998b7ce96b7ed494e665fcfe150a Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Thu, 15 May 2025 13:37:11 +0000
Subject: [PATCH] fix(SW-2657): Changed size of images inside meeting subpage
 cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Approved-by: Matilda Landström
---
 .../HotelPage/Facilities/CardGrid/CardImage/index.tsx          | 2 +-
 .../components/TempDesignSystem/MeetingRoomCard/index.tsx      | 3 ++-
 .../MeetingRoomCard/meetingRoomCard.module.css                 | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/CardImage/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/CardImage/index.tsx
index 9c045671e..35e6c4674 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/CardImage/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/CardImage/index.tsx
@@ -22,7 +22,7 @@ export default function CardImage({
                   className={styles.image}
                   alt={backgroundImage.title}
                   fill
-                  sizes="(max-width: 768px) 100vw, 900px"
+                  sizes="(min-width: 768px) 900px, 100vw"
                   focalPoint={backgroundImage.focalPoint}
                 />
               </div>
diff --git a/apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx b/apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx
index 1ae8e1ad1..f890db360 100644
--- a/apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx
@@ -41,8 +41,9 @@ export default function MeetingRoomCard({ room }: MeetingRoomCardProps) {
         src={image.imageSizes.small}
         alt={image.metaData.altText || image.metaData.altText_En || ""}
         className={styles.image}
-        width={200}
+        width={386}
         height={200}
+        sizes="(min-width: 768px) 386px, 100vw"
       />
       <div className={styles.content}>
         <Subtitle textAlign="left" type="two" color="black">
diff --git a/apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/meetingRoomCard.module.css b/apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/meetingRoomCard.module.css
index f87f980ee..c95ceb861 100644
--- a/apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/meetingRoomCard.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/meetingRoomCard.module.css
@@ -33,6 +33,7 @@
 }
 
 .image {
+  height: 200px;
   width: 100%;
   object-fit: cover;
 }