From 5171d2d4d7503802492846175b932006e7467782 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Fri, 23 Jan 2026 11:49:10 +0000
Subject: [PATCH] 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 | 8 +++++---
 .../ContentType/ContentPage/contentPage.module.css        | 8 ++++++--
 .../components/ContentType/ContentPage/index.tsx          | 7 ++++++-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/apps/scandic-web/components/Blocks/HotelListing/index.tsx b/apps/scandic-web/components/Blocks/HotelListing/index.tsx
index 0d258596c..fd18266a9 100644
--- a/apps/scandic-web/components/Blocks/HotelListing/index.tsx
+++ b/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}
diff --git a/apps/scandic-web/components/ContentType/ContentPage/contentPage.module.css b/apps/scandic-web/components/ContentType/ContentPage/contentPage.module.css
index 7983b1740..0fc62c60d 100644
--- a/apps/scandic-web/components/ContentType/ContentPage/contentPage.module.css
+++ b/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 {
diff --git a/apps/scandic-web/components/ContentType/ContentPage/index.tsx b/apps/scandic-web/components/ContentType/ContentPage/index.tsx
index e6a0e1de6..4ea8e8c08 100644
--- a/apps/scandic-web/components/ContentType/ContentPage/index.tsx
+++ b/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 ? (