Nest CSS, add aspect ratio to figure

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;
+		}
 	}
 }

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