Merged in fix/scandic-friends-tablet-layout (pull request #1372)

fix: fix scandic friends block for tablet view

Approved-by: Chuma Mcphoy (We Ahead)

components/Blocks/JoinScandicFriends/index.tsx

@@ -38,17 +38,26 @@ export default async function JoinScandicFriends({
             height={384}
           />
         ) : (
-          <SurpriseIcon width={384} height={384} />
+          <SurpriseIcon width="100%" height="100%" />
         )}
       </div>
       <div className={styles.content}>
         <div className={styles.textContent}>
           {show_header ? (
             <header className={styles.header}>
-              <BiroScript color="red" type="two">
+              <div>
-                {content.scripted_top_title}
+                <BiroScript
-              </BiroScript>
+                  color="red"
-              <Title level="h3">{content.title}</Title>
+                  type="two"
+                  tilted="small"
+                  className={styles.scriptedText}
+                >
+                  {content.scripted_top_title}
+                </BiroScript>
+              </div>
+              <Title level="h2" as="h4">
+                {content.title}
+              </Title>
             </header>
           ) : null}
 

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 {
@@ -41,6 +42,10 @@
   gap: var(--Spacing-x-quarter);
 }
 
+.scriptedText {
+  display: inline-block;
+}
+
 .usp {
   list-style: none;
   display: grid;
@@ -56,6 +61,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);