update spacing above sponsored content component to be 8px in all scenarios

Author: cemms1

dotcom-rendering/src/components/FeatureCard.tsx

@@ -90,7 +90,7 @@ const hoverStyles = css`
 
 /** When we hover on sublinks, we want to prevent the general hover styles applying */
 const sublinkHoverStyles = css`
-	:has(ul.sublinks:hover) {
+	:has(ul.sublinks:hover, .branding-logo:hover) {
 		.card-headline .show-underline {
 			text-decoration: none;
 		}
@@ -235,10 +235,6 @@ const waveformStyles = css`
 	opacity: 0.3;
 `;
 
-const wrapperStyles = css`
-	padding-top: ${space[3]}px;
-`;
-
 const getMedia = ({
 	imageUrl,
 	imageAltText,
@@ -738,20 +734,18 @@ export const FeatureCard = ({
 						/>
 					)}
 					{isLabs && branding && showLabsRedesign && (
-						<div css={wrapperStyles}>
-							<SponsoredContentLabel
-								branding={branding}
-								containerPalette={containerPalette}
-								orientation="horizontal"
-								alignment="end"
-								ophanComponentLink={
-									labsDataAttributes?.ophanComponentLink
-								}
-								ophanComponentName={
-									labsDataAttributes?.ophanComponentName
-								}
-							/>
-						</div>
+						<SponsoredContentLabel
+							branding={branding}
+							containerPalette={containerPalette}
+							orientation="horizontal"
+							alignment="end"
+							ophanComponentLink={
+								labsDataAttributes?.ophanComponentLink
+							}
+							ophanComponentName={
+								labsDataAttributes?.ophanComponentName
+							}
+						/>
 					)}
 				</div>
 			</ContainerOverrides>

dotcom-rendering/src/components/FrontSection.tsx

@@ -499,13 +499,12 @@ const sponsoredContentLabelWrapper = css`
 	grid-row: bottom-content;
 	grid-column: content;
 
-	margin: ${space[1]}px 0 0;
 	${from.tablet} {
 		/*
 		* side margins of 10px due to the -10px margins on the
 		* grid area for content, to align with the card edges
 		*/
-		margin: ${space[1]}px 10px 0;
+		margin: 0 10px;
 	}
 `;
 

dotcom-rendering/src/components/SponsoredContentLabel.tsx

@@ -34,9 +34,10 @@ const labelStyles = css`
 `;
 
 const wrapperStyles = css`
-	padding-top: ${space[1]}px;
+	padding-top: ${space[2]}px;
 	display: flex;
 	justify-content: end;
+	gap: ${space[1]}px;
 `;
 
 const horizontalStyles = css`