From 5643700e8c9c3a324e35de845bad7337d25dcc31 Mon Sep 17 00:00:00 2001
From: Reza Rahman <13340707+rezrah@users.noreply.github.com>
Date: Mon, 10 Aug 2026 18:00:37 +0100
Subject: [PATCH] add inline padding to FAQ gridline variant

---
 .changeset/wide-faq-gridlines.md      |  5 +++++
 packages/react/src/FAQ/FAQ.module.css | 14 ++++++++++++++
 2 files changed, 19 insertions(+)
 create mode 100644 .changeset/wide-faq-gridlines.md

diff --git a/.changeset/wide-faq-gridlines.md b/.changeset/wide-faq-gridlines.md
new file mode 100644
index 0000000000..ae1781caa3
--- /dev/null
+++ b/.changeset/wide-faq-gridlines.md
@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Updated the `FAQ` gridline variant to include inline padding by default for narrow viewports.
diff --git a/packages/react/src/FAQ/FAQ.module.css b/packages/react/src/FAQ/FAQ.module.css
index bde0197407..71c861f6a2 100644
--- a/packages/react/src/FAQ/FAQ.module.css
+++ b/packages/react/src/FAQ/FAQ.module.css
@@ -10,11 +10,13 @@
 }
 
 .FAQ__content-wrapper--gridline {
+  padding-inline: var(--base-size-20);
   max-width: var(--brand-FAQ-maxWidth-list);
   margin: 0 auto;
 }
 
 .FAQ__heading-wrapper--gridline {
+  padding-inline: var(--base-size-20);
   border-block-end: var(--brand-color-border-muted) var(--brand-borderWidth-thin) solid;
   margin-block-end: var(--base-size-40);
 }
@@ -69,7 +71,19 @@
   margin: 0;
 }
 
+@media screen and (min-width: 48rem) {
+  .FAQ__content-wrapper--gridline,
+  .FAQ__heading-wrapper--gridline {
+    padding-inline: var(--base-size-36);
+  }
+}
+
 @media screen and (min-width: 63.25rem) {
+  .FAQ__content-wrapper--gridline,
+  .FAQ__heading-wrapper--gridline {
+    padding-inline: 0;
+  }
+
   .FAQ__heading-wrapper--gridline {
     margin-block-end: var(--base-size-48);
   }