Update card padding on mobile

Author: domlander

dotcom-rendering/src/components/Masthead/HighlightsCard.tsx

@@ -41,7 +41,7 @@ const container = css`
 	column-gap: ${space[2]}px;
 	/** Relative positioning is required to absolutely position the card link overlay */
 	position: relative;
-	padding: 10px 10px 0 10px;
+	padding: ${space[2]}px ${space[2]}px 0 ${space[2]}px;
 	background-color: ${palette('--highlights-card-background')};
 
 	/**
@@ -55,22 +55,19 @@ const container = css`
 	${until.mobileMedium} {
 		min-height: 174px;
 	}
-
 	${between.mobileMedium.and.tablet} {
 		min-height: 194px;
 		height: 100%;
 	}
-
 	${from.tablet} {
 		height: 100%;
 		width: 160px;
+		padding: 10px 10px 0 10px;
 	}
-
 	${from.tablet} {
 		width: 280px;
 		flex-direction: row;
 	}
-
 	${from.desktop} {
 		width: 300px;
 	}
@@ -105,6 +102,7 @@ const content = css`
 		padding-bottom: 10px;
 	}
 `;
+
 const starWrapper = css`
 	width: fit-content;
 	margin-top: ${space[1]}px;