Merged in fix/LOY-528-contenpage-gap (pull request #3479)

fix(LOY-528): fix gap issues on content pages

* fix(LOY-528): fix gap issues


Approved-by: Erik Tiekstra

apps/scandic-web/components/Blocks/HotelListing/index.tsx

@@ -27,9 +27,11 @@ export default async function HotelListing({
 
   return (
     <Section>
-      <Typography variant="Title/sm">
-        <h3 className={styles.heading}>{heading}</h3>
-      </Typography>
+      {heading ? (
+        <Typography variant="Title/sm">
+          <h3 className={styles.heading}>{heading}</h3>
+        </Typography>
+      ) : null}
       {hotels.map((hotelData) => (
         <HotelListingItem
           key={hotelData.hotel.name}

apps/scandic-web/components/ContentType/ContentPage/contentPage.module.css

@@ -54,11 +54,15 @@
 @media (min-width: 1367px) {
   .content {
     display: grid;
+    grid-template-areas: "main sidebar";
+    grid-template-columns: var(--max-width-text-block) 1fr;
+
+    gap: var(--Space-x9);
+  }
+  .content.hasHeader {
     grid-template-areas:
       "hero hero"
       "main sidebar";
-    grid-template-columns: var(--max-width-text-block) 1fr;
-    gap: var(--Space-x9);
   }
 
   .main {

apps/scandic-web/components/ContentType/ContentPage/index.tsx

@@ -1,3 +1,4 @@
+import { cx } from "class-variance-authority"
 import { Suspense } from "react"
 
 import { BreadcrumbsSkeleton } from "@scandic-hotels/design-system/Breadcrumbs"
@@ -78,7 +79,11 @@ export async function ContentPage() {
           </div>
         ) : null}
 
-        <div className={styles.content}>
+        <div
+          className={cx(styles.content, {
+            [styles.hasHeader]: hero_video || hero_image,
+          })}
+        >
           {hero_video || hero_image ? (
             <>
               {hero_video ? (