rearranging css

Author: oliverabrahams

dotcom-rendering/src/components/ProductCarouselCard.tsx

@@ -27,6 +27,18 @@ const headingFont = css`
 const headingArea = css`
 	grid-row: 1;
 `;
+const readMoreArea = css`
+	grid-row: 2;
+	padding-bottom: ${space[2]}px;
+`;
+const imageArea = css`
+	padding-bottom: ${space[1]}px;
+	grid-row: 3;
+	img {
+		width: 100%;
+		height: auto;
+	}
+`;
 const belowImageArea = css`
 	grid-row: 4;
 `;
@@ -41,7 +53,6 @@ const readMoreCta = css`
 	text-decoration-color: ${palette('--product-card-read-more-decoration')};
 	color: ${palette('--product-card-read-more')};
 	text-underline-offset: 20%;
-	padding-bottom: ${space[2]}px;
 `;
 
 const price = css`
@@ -57,19 +68,7 @@ const buttonWrapper = css`
 	padding-bottom: ${space[4]}px;
 `;
 
-const imageArea = css`
-	padding-bottom: ${space[1]}px;
-	grid-row: 3;
-	img {
-		width: 100%;
-		height: auto;
-	}
-`;
-
-const readMoreArea = css`
-	grid-row: 2;
-`;
-const brandAndProductNameFont = css`
+const brandAndProductNameStyles = css`
 	${headlineMedium17};
 	line-height: 1.3;
 `;
@@ -96,7 +95,7 @@ export const ProductCarouselCard = ({
 								__html: product.primaryHeadingHtml,
 							}}
 						/>
-						<div css={brandAndProductNameFont}>
+						<div css={brandAndProductNameStyles}>
 							{`${product.brandName} ${product.productName}`}
 						</div>
 					</>