Pledge details: Style the pledge organization header on small screens

See #301

Author: ryelle

themes/wporg-5ftf-2024/patterns/single-5ftf-pledge.php

@@ -6,11 +6,11 @@
  */
 
 ?>
-<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|40"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-<div class="wp-block-group alignwide" style="margin-bottom:var(--wp--preset--spacing--40)">
+<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|40"}},"layout":{"type":"flex","flexWrap":"nowrap"},"className":"org-pledge-header"} -->
+<div class="wp-block-group alignwide org-pledge-header" style="margin-bottom:var(--wp--preset--spacing--40)">
 	<!-- wp:group {"style":{"border":{"radius":"2px"},"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}}},"backgroundColor":"light-grey-2","layout":{"type":"constrained"}} -->
 	<div class="wp-block-group has-light-grey-2-background-color has-background" style="border-radius:2px;padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--10)">
-		<!-- wp:post-featured-image {"aspectRatio":"1","width":"110px","scale":"contain"} /-->
+		<!-- wp:post-featured-image {"aspectRatio":"16/9","width":"160px","scale":"contain"} /-->
 	</div>
 	<!-- /wp:group -->
 

themes/wporg-5ftf-2024/src/style/style.scss

@@ -91,3 +91,20 @@ body.is-page-in-menu .wp-block-wporg-local-navigation-bar .wp-block-post-title {
 		}
 	}
 }
+
+/* Style the single (org) pledges header */
+.org-pledge-header {
+
+	@media (max-width: 600px) {
+		flex-direction: column;
+		margin-block-end: 40px !important;
+
+		> .wp-block-group {
+			align-items: flex-start;
+		}
+
+		.wp-block-post-featured-image {
+			width: 100% !important;
+		}
+	}
+}