From 873c655ee3aa40a32ae025cf5fcac7114f372a1a Mon Sep 17 00:00:00 2001
From: James Mockett <1166188+jamesmockett@users.noreply.github.com>
Date: Thu, 24 Oct 2024 15:46:29 +0100
Subject: [PATCH] Add spacing to prevent carousel content being flush with
 buttons (#12675)

---
 dotcom-rendering/src/components/ScrollableCarousel.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/dotcom-rendering/src/components/ScrollableCarousel.tsx b/dotcom-rendering/src/components/ScrollableCarousel.tsx
index 59779aad06..2e2dbe1580 100644
--- a/dotcom-rendering/src/components/ScrollableCarousel.tsx
+++ b/dotcom-rendering/src/components/ScrollableCarousel.tsx
@@ -45,8 +45,12 @@ const themeButtonDisabled: Partial<ThemeButton> = {
 const carouselContainerStyles = css`
 	display: flex;
 	flex-direction: column-reverse;
+	${from.tablet} {
+		gap: ${space[2]}px;
+	}
 	${from.wide} {
 		flex-direction: row;
+		gap: ${space[1]}px;
 	}
 
 	/* Extend carousel into outer margins on mobile */
@@ -121,9 +125,6 @@ const carouselStyles = css`
 
 const buttonContainerStyles = css`
 	margin-left: auto;
-	${from.wide} {
-		margin-left: ${space[1]}px;
-	}
 `;
 
 const buttonLayoutStyles = css`