feat: add markup for additional viewport sizes

components/ContentType/LoyaltyPage.tsx

@@ -8,10 +8,12 @@ import styles from "./loyaltyPage.module.css"
 
 export default async function LoyaltyPage() {
   const loyaltyPage = await serverClient().contentstack.loyaltyPage.get()
-
+  const hasSidebar = !!loyaltyPage.sidebar.length
   return (
-    <section className={styles.content}>
-      {loyaltyPage.sidebar ? <Sidebar blocks={loyaltyPage.sidebar} /> : null}
+    <section
+      className={`${styles.content} ${hasSidebar && styles.hasLeftSignbar}`}
+    >
+      {hasSidebar && <Sidebar blocks={loyaltyPage.sidebar} />}
 
       <MaxWidth className={styles.blocks} tag="main">
         {loyaltyPage.blocks ? <Blocks blocks={loyaltyPage.blocks} /> : null}

components/ContentType/loyaltyPage.module.css

@@ -13,9 +13,12 @@
 }
 
 @media screen and (min-width: 950px) {
+  .withLeftSidebar {
+    grid-template-columns: 30rem 1fr;
+  }
+
   .content {
     gap: 2.7rem;
-    grid-template-columns: 30rem 1fr;
     padding-bottom: 17.5rem;
     padding-left: 2.4rem;
     padding-right: 2.4rem;