From e48e90dee44442170a1b6ef34fdb66036c0584b8 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Wed, 21 May 2025 07:06:11 +0000
Subject: [PATCH] fix(SW-2376): css specificity to fix carousel buttons
 position

Approved-by: Chuma Mcphoy (We Ahead)
---
 .../components/Blocks/CardGallery/cardGallery.module.css        | 2 +-
 .../components/Blocks/CarouselCards/carouselCards.module.css    | 2 +-
 apps/scandic-web/components/Blocks/CarouselCards/index.tsx      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/scandic-web/components/Blocks/CardGallery/cardGallery.module.css b/apps/scandic-web/components/Blocks/CardGallery/cardGallery.module.css
index f34c3190e..f5841f244 100644
--- a/apps/scandic-web/components/Blocks/CardGallery/cardGallery.module.css
+++ b/apps/scandic-web/components/Blocks/CardGallery/cardGallery.module.css
@@ -4,7 +4,7 @@
   gap: var(--Spacing-x4) var(--Spacing-x1);
 }
 
-.navigationButton {
+.carousel .navigationButton {
   top: 125px; /* Content card image has a fixed height of 250px, this centers the button */
 }
 
diff --git a/apps/scandic-web/components/Blocks/CarouselCards/carouselCards.module.css b/apps/scandic-web/components/Blocks/CarouselCards/carouselCards.module.css
index e2a593f0e..3b63779a8 100644
--- a/apps/scandic-web/components/Blocks/CarouselCards/carouselCards.module.css
+++ b/apps/scandic-web/components/Blocks/CarouselCards/carouselCards.module.css
@@ -1,3 +1,3 @@
-.navigationButton {
+.carousel .navigationButton {
   top: 125px; /* Content card image has a fixed height of 250px, this centers the button */
 }
diff --git a/apps/scandic-web/components/Blocks/CarouselCards/index.tsx b/apps/scandic-web/components/Blocks/CarouselCards/index.tsx
index 51eb9de3d..d064b1a83 100644
--- a/apps/scandic-web/components/Blocks/CarouselCards/index.tsx
+++ b/apps/scandic-web/components/Blocks/CarouselCards/index.tsx
@@ -48,7 +48,7 @@ export default function CarouselCards({ carousel_cards }: CarouselCardsProps) {
           onFilterSelect={setActiveFilter}
         />
       )}
-      <Carousel key={activeFilter}>
+      <Carousel key={activeFilter} className={styles.carousel}>
         <Carousel.Content>
           {filteredCards.map((card, index) => (
             <Carousel.Item key={`${card.heading}-${index}`}>