From f393a214ec296856b2c658efb3a5a4e8d5d67601 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Tue, 10 Sep 2024 15:22:55 -0400
Subject: [PATCH] Pledge details: Style the pledge organization header on small
 screens

See #301
---
 .../patterns/single-5ftf-pledge.php             |  6 +++---
 themes/wporg-5ftf-2024/src/style/style.scss     | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/themes/wporg-5ftf-2024/patterns/single-5ftf-pledge.php b/themes/wporg-5ftf-2024/patterns/single-5ftf-pledge.php
index c56cf6d..953fcf3 100644
--- a/themes/wporg-5ftf-2024/patterns/single-5ftf-pledge.php
+++ b/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 -->
 
diff --git a/themes/wporg-5ftf-2024/src/style/style.scss b/themes/wporg-5ftf-2024/src/style/style.scss
index 530487a..b13e615 100644
--- a/themes/wporg-5ftf-2024/src/style/style.scss
+++ b/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;
+		}
+	}
+}