correction

support-frontend/assets/pages/[countryGroupId]/guardianAdLiteLanding/components/guardianAdLiteCards.tsx

@@ -9,6 +9,7 @@ export type GuardianAdLiteCardsProps = {
 		productDescription: ProductDescription;
 		ctaCopy: string;
 	}>;
+	isSignedIn?: boolean;
 };
 
 const container = (cardCount: number) => css`
@@ -28,13 +29,24 @@ const container = (cardCount: number) => css`
 		justify-content: center;
 	}
 `;
+const containerExpand = css`
+	padding-bottom: ${space[6]}px;
+	${from.tablet} {
+		padding-bottom: ${space[9]}px;
+	}
+`;
 
 export function GuardianAdLiteCards({
 	cardsContent,
+	isSignedIn,
 }: GuardianAdLiteCardsProps): JSX.Element {
+	console.log('*** IsSignedIn', isSignedIn);
 	return (
 		<div
-			css={container(cardsContent.length)}
+			css={[
+				container(cardsContent.length),
+				!isSignedIn ? containerExpand : css``,
+			]}
 			role="tabpanel"
 			id={`monthly-tab`}
 			aria-labelledby={`monthly`}

support-frontend/assets/pages/[countryGroupId]/guardianAdLiteLanding/components/headerCards.tsx

@@ -50,25 +50,23 @@ const heading = css`
 	}
 `;
 const signIn = css`
-	padding-bottom: ${space[6]}px;
+	padding: ${space[5]}px 0px ${space[6]}px;
 	${from.tablet} {
 		justify-self: center;
-		padding-bottom: ${space[9]}px;
+		padding: ${space[8]}px 0px ${space[9]}px;
 	}
 `;
 const paragraph = css`
 	${textSans15}
 	color: ${palette.neutral[100]};
 	text-align: left;
-	padding-top: ${space[5]}px;
 	> a {
 		color: ${palette.neutral[100]};
 		font-weight: bold;
 	}
 	${from.tablet} {
 		color: ${palette.neutral[7]};
 		text-align: center;
-		padding-top: ${space[8]}px;
 		max-width: 620px;
 		> a {
 			color: ${palette.brand[500]};
@@ -135,16 +133,19 @@ export function HeaderCards({
 				cssOverrides={containerCardsAndSignIn}
 			>
 				<h1 css={heading}>Choose your advertising preferences</h1>
-				<GuardianAdLiteCards cardsContent={[card1, card2]} />
-				<div css={signIn}>
-					{isSignedIn && (
+				<GuardianAdLiteCards
+					cardsContent={[card1, card2]}
+					isSignedIn={isSignedIn}
+				/>
+				{isSignedIn && (
+					<div css={signIn}>
 						<p css={paragraph}>
 							If you already have Guardian Ad-Lite or another Guardian
 							subscription that offers ad-free reading, such as All-access
 							digital, you should, {SignInLink}
 						</p>
-					)}
-				</div>
+					</div>
+				)}
 			</Container>
 		</>
 	);