Fix responsive layout of home page showcase logos

See https://meta.trac.wordpress.org/ticket/7326

Closes #7326

source/wp-content/themes/wporg-main-2022/patterns/home.php

@@ -136,8 +136,8 @@
 <!-- /wp:columns --></div>
 <!-- /wp:group -->
 
-<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"top":"50px","bottom":"50px"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignwide" style="margin-top:50px;margin-bottom:50px"><!-- wp:image {"id":11474,"width":"105px","height":"33px","sizeSlug":"full","linkDestination":"none"} -->
+<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"top":"50px","bottom":"50px"}}},"className":"wporg-home-showcase-logos","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignwide wporg-home-showcase-logos" style="margin-top:50px;margin-bottom:50px"><!-- wp:image {"id":11474,"width":"105px","height":"33px","sizeSlug":"full","linkDestination":"none"} -->
 <figure class="wp-block-image size-full is-resized"><img src="https://wordpress.org/files/2022/08/Spotify.png" alt="<?php _e( 'Spotify logo', 'wporg' ); ?>" class="wp-image-11474" style="width:105px;height:33px" /></figure>
 <!-- /wp:image -->
 

source/wp-content/themes/wporg-main-2022/src/style/style.scss

@@ -108,6 +108,19 @@ body.home .wp-block-wporg-link-wrapper {
 	}
 }
 
+.wporg-home-showcase-logos {
+
+	@media (max-width: 599px) {
+		display: grid !important;
+		grid-template-columns: 1fr 1fr;
+
+		> .wp-block-image {
+			display: flex;
+			justify-content: center;
+		}
+	}
+}
+
 /**
  * Add a background behind the Editor section's cover block, for browsers that don't support webp.
  */