From 12ca3b843efcea1dbcb9753bd56dfaecf008dbd9 Mon Sep 17 00:00:00 2001
From: Stephanie Hobson <shobson@mozilla.com>
Date: Mon, 21 Jul 2025 21:16:35 -0700
Subject: [PATCH] Fix backwards grid spacing

---
 CHANGELOG.md                                          |  6 ++++++
 assets/sass/protocol/components/_newsletter-form.scss | 10 +++++-----
 assets/sass/protocol/components/_section-heading.scss |  6 +++---
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 39c56b7d1..66e5b3b62 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# HEAD
+
+## Bug Fixes
+
+* **css:** newsletter and section heading components padding now matches other components
+
 # 21.1.0
 
 ## Features
diff --git a/assets/sass/protocol/components/_newsletter-form.scss b/assets/sass/protocol/components/_newsletter-form.scss
index 4ffca6f8f..8a5d98059 100644
--- a/assets/sass/protocol/components/_newsletter-form.scss
+++ b/assets/sass/protocol/components/_newsletter-form.scss
@@ -69,7 +69,7 @@
 
     @media #{$mq-md} {
         @include clearfix;
-        padding: $h-grid-md $v-grid-lg;
+        padding: $v-grid-md $h-grid-lg;
         max-width: none;
 
         .mzp-c-newsletter-image {
@@ -120,20 +120,20 @@
     }
 
     @media #{$mq-xl} {
-        padding: $h-grid-xl $layout-2xl;
+        padding: $v-grid-xl $layout-2xl;
     }
 
     @supports (--css: variables) {
         @media #{$mq-md} {
-            padding: var(--h-grid-md) var(--v-grid-lg);
+            padding: var(--v-grid-md) var(--h-grid-md);
         }
 
         @media #{$mq-lg} {
-            padding: var(--h-grid-lg) $layout-2xl;
+            padding: var(--v-grid-lg) $layout-2xl;
         }
 
         @media #{$mq-xl} {
-            padding: var(--h-grid-xl) $layout-2xl;
+            padding: var(--v-grid-xl) $layout-2xl;
         }
     }
 }
diff --git a/assets/sass/protocol/components/_section-heading.scss b/assets/sass/protocol/components/_section-heading.scss
index f53d618c2..691e1a1b3 100644
--- a/assets/sass/protocol/components/_section-heading.scss
+++ b/assets/sass/protocol/components/_section-heading.scss
@@ -10,16 +10,16 @@
 .mzp-c-section-heading {
     @include text-title-md;
     margin: 0 auto;
-    padding: $h-grid-xs $layout-xs;
+    padding: $v-grid-xs $layout-xs;
     max-width: $content-lg;
     text-align: center;
 
     @media #{$mq-md} {
-        padding: $h-grid-md $v-grid-md;
+        padding: $v-grid-md $h-grid-md;
     }
 
     @media #{$mq-xl} {
-        padding: $h-grid-xl $v-grid-xl;
+        padding: $v-grid-xl $h-grid-xl;
     }
 
     // rely on l-content for padding if nested