Use grid over flexbox for CardWrapper in Safari v11-v14.0

Author: domlander

dotcom-rendering/src/components/Card/components/CardWrapper.tsx

@@ -23,18 +23,20 @@ const baseCardStyles = css`
 	/* We absolutely position the faux link so this is required here */
 	position: relative;
 
-	/* Target Safari 10.1 */
-	/* https://www.browserstack.com/guide/create-browser-specific-css */
+	/*
+	 * Target Safari 10.1 to 14.0
+	 * https://www.browserstack.com/guide/create-browser-specific-css
+	 * Flexbox with gap is not supported until Safari 14.1
+	 */
 	@media not all and (min-resolution: 0.001dpcm) {
-		@supports (-webkit-appearance: none) and
-			(not (stroke-color: transparent)) {
+		@supports (-webkit-appearance: none) and (not (display: flex; gap: 1em)) {
 			display: grid;
 			grid-auto-rows: min-content;
 			align-content: start;
 		}
 	}
 
-	/* a tag specific styles */
+	/* <a /> tag specific styles */
 	color: inherit;
 	text-decoration: none;
 `;