From 9b88b9d1da779462d653981964952e11ad842d5d Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Tue, 18 Feb 2025 16:44:54 +0100
Subject: [PATCH 1/3] fix: fix scandic friends block for tablet view

---
 .../Blocks/JoinScandicFriends/index.tsx       |  2 +-
 .../joinScandicFriends.module.css             | 21 ++++++++++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/components/Blocks/JoinScandicFriends/index.tsx b/components/Blocks/JoinScandicFriends/index.tsx
index 30dc87e7a..f92a592b9 100644
--- a/components/Blocks/JoinScandicFriends/index.tsx
+++ b/components/Blocks/JoinScandicFriends/index.tsx
@@ -38,7 +38,7 @@ export default async function JoinScandicFriends({
             height={384}
           />
         ) : (
-          <SurpriseIcon width={384} height={384} />
+          <SurpriseIcon width="100%" height="100%" />
         )}
       </div>
       <div className={styles.content}>
diff --git a/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css b/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
index f99437f6b..549c44efa 100644
--- a/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
+++ b/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
@@ -6,7 +6,7 @@
   gap: var(--Spacing-x5);
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 900px) {
   .container {
     padding: 0 var(--Spacing-x4) 0 0;
   }
@@ -16,9 +16,9 @@
   display: none;
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 900px) {
   .iconContainer {
-    width: 384px;
+    flex: 0 1 384;
     display: flex; /* gets rid of whitespace */
   }
 }
@@ -28,6 +28,7 @@
   flex-direction: column;
   gap: var(--Spacing-x3);
   padding: var(--Spacing-x3) 0;
+  flex: 1;
 }
 
 .textContent {
@@ -56,6 +57,20 @@
   }
 }
 
+@media screen and (min-width: 900px) {
+  .usp {
+    grid-template-rows: repeat(5, auto);
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .usp {
+    grid-template-rows: repeat(3, auto);
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
 .usp li {
   display: flex;
   gap: var(--Spacing-x1);

From f55ac3999a04f4bff7209874364c3c0ba7611335 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Wed, 19 Feb 2025 15:24:02 +0100
Subject: [PATCH 2/3] fix: preamble, title and scripted text has been corrected
 in sizes and rotate

---
 components/Blocks/JoinScandicFriends/index.tsx | 18 ++++++++++++------
 .../joinScandicFriends.module.css              |  4 ++++
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/components/Blocks/JoinScandicFriends/index.tsx b/components/Blocks/JoinScandicFriends/index.tsx
index f92a592b9..41a7886fa 100644
--- a/components/Blocks/JoinScandicFriends/index.tsx
+++ b/components/Blocks/JoinScandicFriends/index.tsx
@@ -6,7 +6,6 @@ import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./joinScandicFriends.module.css"
@@ -45,14 +44,21 @@ export default async function JoinScandicFriends({
         <div className={styles.textContent}>
           {show_header ? (
             <header className={styles.header}>
-              <BiroScript color="red" type="two">
-                {content.scripted_top_title}
-              </BiroScript>
-              <Title level="h3">{content.title}</Title>
+              <div>
+                <BiroScript
+                  color="red"
+                  type="two"
+                  tilted="small"
+                  className={styles.scriptedText}
+                >
+                  {content.scripted_top_title}
+                </BiroScript>
+              </div>
+              <Title level="h4">{content.title}</Title>
             </header>
           ) : null}
 
-          <Preamble>{content.preamble}</Preamble>
+          <Body>{content.preamble}</Body>
 
           {show_usp && usp.length ? (
             <ul className={styles.usp}>
diff --git a/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css b/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
index 549c44efa..0ec542e7a 100644
--- a/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
+++ b/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
@@ -42,6 +42,10 @@
   gap: var(--Spacing-x-quarter);
 }
 
+.scriptedText {
+  display: inline-block;
+}
+
 .usp {
   list-style: none;
   display: grid;

From 220ce1e93b4bd81539fb566591b2018d8988823c Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Wed, 19 Feb 2025 15:30:58 +0100
Subject: [PATCH 3/3] fix: change header level

---
 components/Blocks/JoinScandicFriends/index.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/Blocks/JoinScandicFriends/index.tsx b/components/Blocks/JoinScandicFriends/index.tsx
index 41a7886fa..b58a1020a 100644
--- a/components/Blocks/JoinScandicFriends/index.tsx
+++ b/components/Blocks/JoinScandicFriends/index.tsx
@@ -6,6 +6,7 @@ import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./joinScandicFriends.module.css"
@@ -54,11 +55,13 @@ export default async function JoinScandicFriends({
                   {content.scripted_top_title}
                 </BiroScript>
               </div>
-              <Title level="h4">{content.title}</Title>
+              <Title level="h2" as="h4">
+                {content.title}
+              </Title>
             </header>
           ) : null}
 
-          <Body>{content.preamble}</Body>
+          <Preamble>{content.preamble}</Preamble>
 
           {show_usp && usp.length ? (
             <ul className={styles.usp}>