From 48018071d922be84d97eb0c47b95f8c8a8d9a536 Mon Sep 17 00:00:00 2001
From: Raphael Ferrand <goldenraphti@users.noreply.github.com>
Date: Fri, 21 Jun 2024 11:54:19 +0200
Subject: [PATCH] SWED-2503 switch :is for :where for specificity in cards

---
 src/less/components/card.less | 29 ++++++++++++++++-------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/less/components/card.less b/src/less/components/card.less
index f5e189a992..e0bc72c42c 100644
--- a/src/less/components/card.less
+++ b/src/less/components/card.less
@@ -44,7 +44,8 @@
 		padding-inline-end: var(--padding-outer);
 	}
 
-	&:not(.cards-wide):has(> :is(img, picture, .illustration):first-child) .h4 {
+	&:not(.cards-wide):has(> :where(img, picture, .illustration):first-child)
+		.h4 {
 		padding-block-start: 0;
 	}
 
@@ -69,7 +70,7 @@
 		padding-block-end: var(--padding-outer);
 	}
 
-	&.cards-wide:has(> :is(img, picture, .illustration):first-child)
+	&.cards-wide:has(> :where(img, picture, .illustration):first-child)
 		:is(.h4, .cards-icon, .cards-content, .cards-cta) {
 		padding-inline-start: 0;
 
@@ -95,7 +96,7 @@
 		margin-inline-end: 0.5rem;
 	}
 
-	&:has(> :is(img, picture, .illustration):first-child) {
+	&:has(> :where(img, picture, .illustration):first-child) {
 		grid-template-areas:
 			"image"
 			"title"
@@ -103,7 +104,7 @@
 			"cta";
 		grid-template-columns: 1fr;
 
-		&:is(button) :is(img, picture, .illustration) {
+		&:is(button) :where(img, picture, .illustration) {
 			max-width: 100%;
 		}
 
@@ -115,15 +116,15 @@
 			grid-area: image;
 		}
 
-		&:has(> :is(img, picture, .illustration):first-child.ratio-1-1):before {
+		&:has(> :where(img, picture, .illustration):first-child.ratio-1-1):before {
 			aspect-ratio: 1 / 1;
 		}
 
-		&:has(> :is(img, picture, .illustration):first-child.ratio-4-3):before {
+		&:has(> :where(img, picture, .illustration):first-child.ratio-4-3):before {
 			aspect-ratio: 4 / 3;
 		}
 
-		& > :is(img, picture, .illustration):first-child {
+		& > :where(img, picture, .illustration):first-child {
 			width: 100%;
 			aspect-ratio: 16 / 9;
 			grid-area: image;
@@ -200,7 +201,7 @@
 			}
 		}
 
-		&:not(:has(> :is(img, picture, .illustration):first-child)) {
+		&:not(:has(> :where(img, picture, .illustration):first-child)) {
 			grid-template-rows: auto auto;
 
 			& .cards-cta {
@@ -208,7 +209,9 @@
 			}
 		}
 
-		&:not(:has(> :is(img, picture, .illustration):first-child)):not(:has(.h4)) {
+		&:not(:has(> :where(img, picture, .illustration):first-child)):not(
+				:has(.h4)
+			) {
 			grid-template-areas: "icon text-content cta";
 			grid-template-columns: auto 1fr min-content;
 			grid-template-rows: auto;
@@ -219,7 +222,7 @@
 			}
 		}
 
-		&:not(:has(> :is(img, picture, .illustration):first-child)):not(
+		&:not(:has(> :where(img, picture, .illustration):first-child)):not(
 				:has(.cards-content)
 			) {
 			grid-template-areas: "icon title cta";
@@ -233,7 +236,7 @@
 			}
 		}
 
-		&:not(:has(> :is(img, picture, .illustration):first-child)):not(
+		&:not(:has(> :where(img, picture, .illustration):first-child)):not(
 				:has(.cards-icon)
 			):not(:has(.cards-content)) {
 			grid-template-areas: "title cta";
@@ -246,7 +249,7 @@
 			}
 		}
 
-		&:has(> :is(img, picture, .illustration):first-child) {
+		&:has(> :where(img, picture, .illustration):first-child) {
 			grid-template-areas:
 				"image title"
 				"image text-content"
@@ -275,7 +278,7 @@
 				aspect-ratio: 1;
 			}
 
-			& > :is(img, picture, .illustration):first-child {
+			& > :where(img, picture, .illustration):first-child {
 				max-width: 100%;
 				object-fit: cover;
 				width: auto;