homepage donate section style update (#15494)

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

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

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>