move css into variables

Author: oliverabrahams

dotcom-rendering/src/components/ProductCarouselCard.tsx

@@ -24,6 +24,13 @@ const productCarouselCardHeading = css`
 	color: ${palette('--product-card-headline')};
 `;
 
+const headingArea = css`
+	grid-row: 1;
+`;
+const productCardRowFour = css`
+	grid-row: 4;
+`;
+
 const brandAndProductName = css`
 	${headlineMedium17};
 `;
@@ -80,11 +87,7 @@ export const ProductCarouselCard = ({
 	const h2Id = product.h2Id;
 	return (
 		<>
-			<div
-				css={css`
-					grid-row: 1;
-				`}
-			>
+			<div css={headingArea}>
 				{hasHeading && (
 					<>
 						<div
@@ -117,11 +120,7 @@ export const ProductCarouselCard = ({
 			<div css={imageArea}>
 				<ProductCardImage format={format} image={product.image} />
 			</div>
-			<div
-				css={css`
-					grid-row: 4;
-				`}
-			>
+			<div css={productCardRowFour}>
 				{!hasHeading && (
 					<div>
 						<div css={brandAndProductName}>{product.brandName}</div>