From 808e95b655234ac99b9766cc9406256d6e017761 Mon Sep 17 00:00:00 2001
From: Melissa Piper <melissa.piper@viget.com>
Date: Thu, 25 Apr 2024 10:44:44 -0400
Subject: [PATCH] Nest CSS, add aspect ratio to figure

---
 .../src/styles/blocks/logo-grid.css           | 26 +++++++++++--------
 .../themes/wp-starter/tailwind.config.js      |  3 +++
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/wp-content/themes/wp-starter/src/styles/blocks/logo-grid.css b/wp-content/themes/wp-starter/src/styles/blocks/logo-grid.css
index 75b96946..714d5327 100644
--- a/wp-content/themes/wp-starter/src/styles/blocks/logo-grid.css
+++ b/wp-content/themes/wp-starter/src/styles/blocks/logo-grid.css
@@ -1,16 +1,20 @@
 @layer components {
-	.acf-block-logo-grid figure {
-		@apply flex;
-		@apply basis-1/2-gap lg:basis-1/4-gap;
-	}
+	.acf-block-logo-grid {
+		& figure {
+			@apply flex;
+			@apply aspect-grid-image;
+			@apply basis-1/2-gap lg:basis-1/4-gap;
 
-	.acf-block-logo-grid figure img {
-		@apply block;
-		@apply max-w-full;
-	}
+			& img {
+				@apply block;
+				@apply max-w-full h-full;
+				@apply object-contain;
+			}
+		}
 
-	/* Fix for image sizing in editor */
-	.acf-block-logo-grid .components-resizable-box__container {
-		@apply !shrink;
+		/* Fix for image sizing in editor */
+		& .components-resizable-box__container {
+			@apply !shrink;
+		}
 	}
 }
diff --git a/wp-content/themes/wp-starter/tailwind.config.js b/wp-content/themes/wp-starter/tailwind.config.js
index b0967c5f..318c3479 100644
--- a/wp-content/themes/wp-starter/tailwind.config.js
+++ b/wp-content/themes/wp-starter/tailwind.config.js
@@ -30,6 +30,9 @@ export default {
 		contentSmall: minBreakpoint.toString(),
 		contentBase: maxBreakpoint.toString(),
 		extend: {
+			aspectRatio: {
+				'grid-image': '5/3',
+			},
 			colors: {
 				transparent: 'transparent',
 				//If you update the names or add more colors you will need to update the file in theme-json/settings/color.js