remove the age warning and sign in gate from the filter us

Author: oliverabrahams

dotcom-rendering/src/components/InlineProductCard.tsx

@@ -41,19 +41,19 @@ const card = css`
 	background-color: ${palette('--product-card-background')};
 	padding: ${space[2]}px ${space[3]}px ${space[3]}px;
 	display: grid;
-	grid-template-columns: auto 1fr;
-	column-gap: 12px;
+	grid-template-columns: 1fr 1fr;
+	column-gap: 10px;
 	row-gap: ${space[3]}px;
 	border-top: 1px solid ${palette('--section-border-lifestyle')};
 	max-width: 100%;
-
 	img {
-		height: 165px;
-		width: 165px;
-		object-fit: cover;
+		width: 100%;
+		height: auto;
 	}
-
-	${from.phablet} {
+	${from.mobileLandscape} {
+		column-gap: 20px;
+	}
+	${from.tablet} {
 		img {
 			height: 328px;
 			width: 328px;
@@ -191,7 +191,7 @@ export const InlineProductCard = ({
 				/>
 				{!!secondaryCTA && !!secondaryUrl && (
 					<ProductLinkButton
-						dataComponent="inline-secondary-card-primary-button"
+						dataComponent="inline-product-card-secondary-button"
 						label={stripHtmlFromString(secondaryCTA)}
 						url={secondaryUrl}
 						priority="tertiary"

dotcom-rendering/src/components/LeftColProductCard.tsx

@@ -92,8 +92,6 @@ const Statistic = ({ name, value }: Statistics) => (
 	</div>
 );
 
-//todo -- make this a proper image generateSources() etc.
-
 export const LeftColProductCard = ({
 	brandName,
 	productName,

dotcom-rendering/src/components/Picture.tsx

@@ -271,8 +271,8 @@ const decideImageWidths = ({
 				];
 			case 'productCard':
 				return [
+					{ breakpoint: breakpoints.mobile, width: 328 },
 					{ breakpoint: breakpoints.wide, width: 220 },
-					{ breakpoint: breakpoints.mobile, width: 165 },
 				];
 			case 'inline':
 			default:
@@ -371,7 +371,7 @@ const decideImageWidths = ({
 				];
 			case 'productCard':
 				return [
-					{ breakpoint: breakpoints.mobile, width: 165 },
+					{ breakpoint: breakpoints.mobile, width: 328 },
 					{ breakpoint: breakpoints.wide, width: 220 },
 				];
 			case 'inline':