feat(LOY-276): add hero image to account page

apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx

@@ -47,11 +47,9 @@ export default async function SASLinkedAccount({
       <SectionContainer>
         <SectionHeader link={link} preamble={subtitle} title={title} />
         <SectionLink link={link} variant="mobile" />
-        <section className={styles.cardsContainer}>
-          <Suspense fallback={<MatchedAccountInfoSkeleton />}>
-            <MatchedAccountInfo />
-          </Suspense>
-        </section>
+        <Suspense fallback={<MatchedAccountInfoSkeleton />}>
+          <MatchedAccountInfo />
+        </Suspense>
       </SectionContainer>
       <div className={styles.mutationSection}>
         <Typography variant="Body/Supporting text (caption)/smRegular">
@@ -98,7 +96,7 @@ async function MatchedAccountInfo() {
   const matchState = calculateMatchState(user.loyalty)
 
   return (
-    <section className={styles.matchedAccountSection}>
+    <div className={styles.matchedAccountSection}>
       <div className={styles.accountDetails}>
         <div className={styles.stack}>
           <Label>
@@ -148,7 +146,7 @@ async function MatchedAccountInfo() {
           scandicExpirationDate={scandicExpirationDate}
         />
       </div>
-    </section>
+    </div>
   )
 }
 
@@ -156,7 +154,7 @@ async function MatchedAccountInfoSkeleton() {
   const intl = await getIntl()
 
   return (
-    <section className={styles.matchedAccountSection}>
+    <div className={styles.matchedAccountSection}>
       <div className={styles.accountDetails}>
         <div className={styles.stack}>
           <Label>
@@ -192,7 +190,7 @@ async function MatchedAccountInfoSkeleton() {
       <div className={styles.tierMatchStatus}>
         <TierMatchMessageSkeleton />
       </div>
-    </section>
+    </div>
   )
 }
 

apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/linkedAccounts.module.css

@@ -12,17 +12,6 @@
   }
 }
 
-.cardsContainer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x3);
-  justify-content: flex-start;
-
-  @media screen and (min-width: 768px) {
-    flex-direction: row;
-  }
-}
-
 .mutationSection {
   display: flex;
   flex-direction: column;