diff --git a/components/Blocks/JoinScandicFriends/index.tsx b/components/Blocks/JoinScandicFriends/index.tsx index 30dc87e7a..b58a1020a 100644 --- a/components/Blocks/JoinScandicFriends/index.tsx +++ b/components/Blocks/JoinScandicFriends/index.tsx @@ -38,17 +38,26 @@ export default async function JoinScandicFriends({ height={384} /> ) : ( - + )}
{show_header ? (
- - {content.scripted_top_title} - - {content.title} +
+ + {content.scripted_top_title} + +
+ + {content.title} +
) : null} diff --git a/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css b/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css index f99437f6b..0ec542e7a 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 { @@ -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);