From 7c519979bbb0fb0a57f0cadece36ccac0781421b Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Fri, 14 Feb 2025 13:19:06 +0100
Subject: [PATCH] refactor: Adjust carousel card gap

---
 .../CarouselCards/carouselCards.module.css    | 32 -------------------
 components/Carousel/carousel.module.css       |  6 ++--
 2 files changed, 3 insertions(+), 35 deletions(-)

diff --git a/components/Blocks/CarouselCards/carouselCards.module.css b/components/Blocks/CarouselCards/carouselCards.module.css
index 0e4d728c6..ce54e5fe4 100644
--- a/components/Blocks/CarouselCards/carouselCards.module.css
+++ b/components/Blocks/CarouselCards/carouselCards.module.css
@@ -1,35 +1,3 @@
-/*
-  Mock styles for the carousel cards. Will be removed/replaced
-  when the carousel functionality is implemented (SW-1542). 
-*/
-.cardsContainer {
-  display: grid;
-  gap: var(--Spacing-x3);
-  grid-auto-flow: column;
-  grid-auto-columns: 100%;
-  overflow-x: auto;
-  overscroll-behavior-x: contain;
-  scroll-snap-type: x mandatory;
-}
-
-.cardsContainer > * {
-  scroll-snap-align: start;
-}
-
-/* Show 2 cards on tablet */
-@media (min-width: 768px) {
-  .cardsContainer {
-    grid-auto-columns: calc((100% - var(--Spacing-x3)) / 2);
-  }
-}
-
-/* Show 3 cards on desktop */
-@media (min-width: 1024px) {
-  .cardsContainer {
-    grid-auto-columns: calc((100% - var(--Spacing-x3) * 2) / 3);
-  }
-}
-
 .navigationButton {
   top: 30%;
 }
diff --git a/components/Carousel/carousel.module.css b/components/Carousel/carousel.module.css
index 5aeabf62c..cf9612a42 100644
--- a/components/Carousel/carousel.module.css
+++ b/components/Carousel/carousel.module.css
@@ -10,7 +10,7 @@
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: 100%;
-  gap: var(--Spacing-x3);
+  gap: var(--Spacing-x2);
 }
 
 .item {
@@ -34,11 +34,11 @@
 }
 
 .buttonPrev {
-  left: calc(-1 * var(--Spacing-x3));
+  left: calc(-1 * var(--Spacing-x1));
 }
 
 .buttonNext {
-  right: calc(-1 * var(--Spacing-x3));
+  right: calc(-1 * var(--Spacing-x1));
 }
 
 .prevIcon {