fix: fix scandic friends block for tablet view

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