From f5b8f2257d1316a8fc1f21b6c8d189017338bb7d Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Thu, 19 Dec 2024 16:51:55 -0500
Subject: [PATCH] Fix specificity of `gap` and `align-items` in layout
 utilities

---
 src/styles/utilities/layout.css | 41 +++++++++++++++++++++++++--------
 1 file changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/styles/utilities/layout.css b/src/styles/utilities/layout.css
index cad9146dc..06fdca784 100644
--- a/src/styles/utilities/layout.css
+++ b/src/styles/utilities/layout.css
@@ -11,22 +11,33 @@
   margin-inline: 0;
 }
 
+:where(
+  [class*='wa-cluster'],
+  [class*='wa-flank'],
+  [class*='wa-frame'],
+  [class*='wa-grid'],
+  [class*='wa-stack'],
+  [class*='wa-split']
+) {
+  gap: var(--wa-space-m);
+}
+
 /* #region Cluster */
 [class*='wa-cluster'] {
   display: flex;
-  align-items: center;
   flex-wrap: wrap;
-  gap: var(--wa-space-m);
   justify-content: flex-start;
 }
+
+:where([class*='wa-cluster']) {
+  align-items: center;
+}
 /* #endregion */
 
 /* #region Flank */
 [class*='wa-flank'] {
   display: flex;
-  align-items: center;
   flex-wrap: wrap;
-  gap: var(--wa-space-m);
 
   --content-percentage: initial;
   --flank-size: initial;
@@ -53,12 +64,15 @@
   flex-grow: 999;
   min-inline-size: var(--content-percentage, 50%);
 }
+
+:where([class*='wa-flank']) {
+  align-items: center;
+}
 /* #endregion */
 
 /* #region Frame */
 [class*='wa-frame'] {
   display: flex;
-  align-items: center;
   aspect-ratio: 1 / 1;
   justify-content: center;
   overflow: hidden;
@@ -80,12 +94,15 @@
 [class*='wa-frame'][class*='\:portrait'] {
   aspect-ratio: 9 / 16;
 }
+
+:where([class*='wa-frame']) {
+  align-items: center;
+}
 /* #endregion */
 
 /* #region Grid */
 [class*='wa-grid'] {
   display: grid;
-  gap: var(--wa-space-m);
   grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size, 20ch), 100%), 1fr));
 
   --min-column-size: initial;
@@ -99,9 +116,7 @@
 /* #region Split */
 [class*='wa-split'] {
   display: flex;
-  align-items: center;
   flex-wrap: wrap;
-  gap: var(--wa-space-m);
   justify-content: space-between;
 }
 
@@ -123,14 +138,20 @@
   align-self: stretch;
 }
 
+:where([class*='wa-split']) {
+  align-items: center;
+}
+
 /* #endregion */
 
 /* #region Stack */
 [class*='wa-stack'] {
   display: flex;
-  align-items: stretch;
   flex-direction: column;
-  gap: var(--wa-space-m);
   justify-content: flex-start;
 }
+
+:where([class*='wa-stack']) {
+  align-items: stretch;
+}
 /* #endregion */