From 05bda76ad3719cfef9cfe53fe9048bcb64fa2505 Mon Sep 17 00:00:00 2001
From: Emily Bourke <emily.bourke@guardian.co.uk>
Date: Mon, 21 Oct 2024 17:22:51 +0100
Subject: [PATCH] Keep large margins for supporting on mobile

These margins were too small: the request from the visuals team is that
they be 32px.
---
 dotcom-rendering/src/components/Figure.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/dotcom-rendering/src/components/Figure.tsx b/dotcom-rendering/src/components/Figure.tsx
index 2db8ee3c8f..c1bfb0abae 100644
--- a/dotcom-rendering/src/components/Figure.tsx
+++ b/dotcom-rendering/src/components/Figure.tsx
@@ -24,8 +24,8 @@ const roleCss = (isDatawrapperGraphic: boolean) => {
 
 		supporting: css`
 			clear: left;
-			margin-top: ${space[3]}px;
-			margin-bottom: ${isDatawrapperGraphic ? space[5] : space[3]}px;
+			margin-top: ${space[isDatawrapperGraphic ? 8 : 3]}px;
+			margin-bottom: ${space[isDatawrapperGraphic ? 8 : 3]}px;
 			${isDatawrapperGraphic
 				? `border-bottom: 1px solid ${themePalette(
 						'--branding-border',
@@ -41,6 +41,7 @@ const roleCss = (isDatawrapperGraphic: boolean) => {
 				margin-right: 20px;
 				line-height: 0;
 				margin-top: ${space[2]}px;
+				${isDatawrapperGraphic ? `margin-bottom: ${space[5]}px;` : ''}
 			}
 			${from.leftCol} {
 				margin-left: -160px;