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] 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);