From e5836c9e6595c1d29e1a31475ad2f2662a2ec9f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Wed, 21 May 2025 06:27:59 +0000
Subject: [PATCH] Merged in fix/SW-2817-activity-card (pull request #2160)

Fix/SW-2816: activity card span full width

* fix(SW-2816): image span full width

* fix(SW-2817): improve image blurriness


Approved-by: Erik Tiekstra
---
 .../TempDesignSystem/Card/card.module.css     |  4 ++--
 .../components/TempDesignSystem/Card/card.ts  |  2 --
 .../TempDesignSystem/Card/index.tsx           | 23 +++++++------------
 3 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/apps/scandic-web/components/TempDesignSystem/Card/card.module.css b/apps/scandic-web/components/TempDesignSystem/Card/card.module.css
index e5ed857cd..ced594ee9 100644
--- a/apps/scandic-web/components/TempDesignSystem/Card/card.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/Card/card.module.css
@@ -20,13 +20,13 @@
   height: 100%;
 }
 
-.imageWrapper {
+.imageContainer {
   display: flex;
   width: 100%;
   height: 100%;
 }
 
-.imageWrapper::after {
+.imageGradient::after {
   background: linear-gradient(
     180deg,
     rgba(0, 0, 0, 0) 0%,
diff --git a/apps/scandic-web/components/TempDesignSystem/Card/card.ts b/apps/scandic-web/components/TempDesignSystem/Card/card.ts
index 7f58c2f89..6c6f4e740 100644
--- a/apps/scandic-web/components/TempDesignSystem/Card/card.ts
+++ b/apps/scandic-web/components/TempDesignSystem/Card/card.ts
@@ -24,8 +24,6 @@ export interface CardProps
   scriptedTopTitle?: string | null
   heading?: string | null
   bodyText?: string | null
-  imageHeight?: number
-  imageWidth?: number
   imageGradient?: boolean
   onPrimaryButtonClick?: () => void
   onSecondaryButtonClick?: () => void
diff --git a/apps/scandic-web/components/TempDesignSystem/Card/index.tsx b/apps/scandic-web/components/TempDesignSystem/Card/index.tsx
index 779febd6b..0473bac89 100644
--- a/apps/scandic-web/components/TempDesignSystem/Card/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Card/index.tsx
@@ -1,3 +1,4 @@
+import { cx } from "class-variance-authority"
 import Link from "next/link"
 
 import Image from "@/components/Image"
@@ -27,8 +28,6 @@ export default function Card({
   className,
   theme,
   backgroundImage,
-  imageHeight,
-  imageWidth,
   imageGradient,
   onPrimaryButtonClick,
   onSecondaryButtonClick,
@@ -39,16 +38,6 @@ export default function Card({
   const scriptFontColor = getScriptFontColor(theme)
   const bodyFontColor = getBodyFontColor(theme)
 
-  imageHeight = imageHeight || 320
-
-  imageWidth =
-    imageWidth ||
-    (backgroundImage?.dimensions
-      ? backgroundImage.dimensions.aspectRatio >= 1
-        ? backgroundImage.dimensions.aspectRatio * imageHeight
-        : imageHeight / backgroundImage.dimensions.aspectRatio
-      : 420)
-
   return (
     <article
       className={cardVariants({
@@ -58,13 +47,17 @@ export default function Card({
       })}
     >
       {backgroundImage && (
-        <div className={imageGradient ? styles.imageWrapper : ""}>
+        <div
+          className={cx(styles.imageContainer, {
+            [styles.imageGradient]: imageGradient,
+          })}
+        >
           <Image
             src={backgroundImage.url}
             className={styles.image}
             alt={backgroundImage.meta.alt || backgroundImage.title}
-            width={imageWidth}
-            height={imageHeight}
+            fill
+            sizes="(min-width: 1367px) 700px, 900px"
             focalPoint={backgroundImage.focalPoint}
           />
         </div>