fix(SW-2603): Fixed image sizes on hotel pages and width of main section

Approved-by: Arvid Norlin
Approved-by: Matilda Landström

apps/scandic-web/components/TempDesignSystem/Card/CardImage/cardImage.module.css

@@ -1,22 +0,0 @@
-.image {
-  object-fit: cover;
-  overflow: hidden;
-  width: 100%;
-  min-height: 180px; /* Fixed height from Figma */
-  border-radius: var(--Corner-radius-md);
-}
-
-.imageContainer {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: var(--Spacing-x-quarter);
-}
-
-.card {
-  height: 254px; /* Fixed height from Figma */
-}
-
-.container {
-  display: grid;
-  gap: var(--Spacing-x-quarter);
-}

apps/scandic-web/components/TempDesignSystem/Card/CardImage/index.tsx

@@ -1,35 +0,0 @@
-import Image from "@/components/Image"
-
-import Card from ".."
-
-import styles from "./cardImage.module.css"
-
-import type { CardImageProps } from "@/types/components/cardImage"
-
-export default function CardImage({
-  card,
-  imageCards,
-  className,
-}: CardImageProps) {
-  return (
-    <article className={`${styles.container} ${className}`}>
-      <div className={styles.imageContainer}>
-        {imageCards?.map(
-          ({ backgroundImage }) =>
-            backgroundImage && (
-              <Image
-                key={backgroundImage.id}
-                src={backgroundImage.url}
-                className={styles.image}
-                alt={backgroundImage.title}
-                width={180}
-                height={180}
-                focalPoint={backgroundImage.focalPoint}
-              />
-            )
-        )}
-      </div>
-      <Card {...card} className={styles.card} />
-    </article>
-  )
-}

apps/scandic-web/components/TempDesignSystem/Card/card.module.css

@@ -5,7 +5,7 @@
   flex-direction: column;
   justify-content: center;
   border-radius: var(--Corner-radius-md);
-  margin-right: var(--Spacing-x2);
+  margin-right: var(--Space-x2);
   text-align: center;
   width: 100%;
   text-wrap: balance;
@@ -49,10 +49,9 @@
 }
 
 .content {
-  margin: var(--Spacing-x0) var(--Spacing-x4);
-  position: absolute;
   display: grid;
-  gap: var(--Spacing-x2);
+  padding: var(--Space-x4) var(--Space-x3);
+  gap: var(--Space-x2);
 }
 
 .themeOne {
@@ -83,25 +82,22 @@
   background: var(--Primary-Strong-Surface-Normal);
 }
 
-.themeImage {
-}
-
 .themeImage .content {
   position: absolute;
 }
 
 .scriptContainer {
   display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .scriptedTitle {
-  padding: var(--Spacing-x1);
+  padding: var(--Space-x1);
   margin: 0;
 }
 
 .buttonContainer {
   display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   justify-content: center;
 }