From 30d8722f35a36e5b6495dabafa26defd9071e17a Mon Sep 17 00:00:00 2001
From: Jingwen Zhu <42974891+wen-2018@users.noreply.github.com>
Date: Fri, 15 Nov 2024 15:33:32 -0400
Subject: [PATCH] homepage donate section style update (#15494)

---
 .../mozorg/home/includes/m24/donate.html      |  2 +-
 media/css/m24/donate.scss                     | 38 +++++++++++++------
 media/img/m24/todo-21-9.svg                   |  6 +++
 3 files changed, 33 insertions(+), 13 deletions(-)
 create mode 100644 media/img/m24/todo-21-9.svg

diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/donate.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/donate.html
index d91bd7fd1b..efdeb1d696 100644
--- a/bedrock/mozorg/templates/mozorg/home/includes/m24/donate.html
+++ b/bedrock/mozorg/templates/mozorg/home/includes/m24/donate.html
@@ -7,7 +7,7 @@
 <div class="m24-t-purple m24-t-transition-next" id="donate">
   <div class="m24-c-donate">
     <h2 class="m24-c-donate-title">Donate to the Mozilla non-profit</h2>
-    <div class="m24-c-donate-media"><img src="{{ static('img/m24/todo-27-1.svg') }}" alt="" height="253" width="680"></div>
+    <div class="m24-c-donate-media"><img src="{{ static('img/m24/todo-21-9.svg') }}" alt="" height="269" width="564"></div>
     <div class="m24-c-donate-info">
       <p>Mozilla is building a movement to reclaim the internet. Together we can
         build a future where our privacy is protected, AI is trustworthy and
diff --git a/media/css/m24/donate.scss b/media/css/m24/donate.scss
index 0f4582a6fe..9758650079 100644
--- a/media/css/m24/donate.scss
+++ b/media/css/m24/donate.scss
@@ -39,32 +39,46 @@
 
 @media #{$mq-lg} {
     .m24-c-donate {
-        @include grid;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(4, 1fr);
+        gap: $spacer-lg;
     }
 
     .m24-c-donate-title {
-        grid-column: 1/7;
+        grid-column: 1/2;
+        grid-row: 1/3;
+        margin-bottom: 0;
     }
 
     .m24-c-donate-media {
-        grid-column: 1/7;
-        grid-row: 2;
+        grid-column: 2/3;
+        grid-row: 1/4;
+        place-self: start end;
+
+        img {
+            width: 100%;
+            height: auto;
+        }
     }
 
     .m24-c-donate-info {
-        @include bidi((
-            (margin-left, $spacer-lg, 0),
-            (margin-right, 0, $spacer-lg),
-        ));
-        grid-column: 7/13;
-        grid-row: 2;
+        grid-column: 1/2;
+        grid-row: 3/5;
         padding-top: 0;
         text-wrap-style: balance;
+        place-self: end start;
+        font-size: $text-body-lg;
+
+        p:last-of-type {
+            margin-bottom: 0;
+        }
     }
 
     .m24-c-donate-cta {
-        grid-column: 7/13;
-        grid-row: 1;
+        grid-column: 2/3;
+        grid-row: 4/5;
         margin: 0;
+        place-self: end end;
     }
 }
diff --git a/media/img/m24/todo-21-9.svg b/media/img/m24/todo-21-9.svg
new file mode 100644
index 0000000000..9c522b6495
--- /dev/null
+++ b/media/img/m24/todo-21-9.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 564 269" width="564px" height="269px" fill="#D3D3D3" xmlns="http://www.w3.org/2000/svg">
+  <defs/>
+  <rect width="564" height="269" style="fill: rgb(187, 187, 187);"/>
+  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 28px;" x="688.861" y="276.168">21:9</text>
+</svg>