fix(SW-2376): css specificity to fix carousel buttons position

Approved-by: Chuma Mcphoy (We Ahead)

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 */
 }
 

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 */
 }

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}`}>