From 0270f06d4e5cc85aea5f671caa2c7e8ab08abe64 Mon Sep 17 00:00:00 2001
From: Daniel Guillan <danielguillan@github.com>
Date: Thu, 26 Sep 2024 15:39:54 +0200
Subject: [PATCH] Improve RiverBreakout spacing (#768)

---
 .changeset/lovely-rocks-bathe.md                 |  5 +++++
 packages/react/src/river/river-shared.module.css | 15 ++++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/lovely-rocks-bathe.md

diff --git a/.changeset/lovely-rocks-bathe.md b/.changeset/lovely-rocks-bathe.md
new file mode 100644
index 000000000..bdfb411de
--- /dev/null
+++ b/.changeset/lovely-rocks-bathe.md
@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Improves spacing of RiverBreakout content
diff --git a/packages/react/src/river/river-shared.module.css b/packages/react/src/river/river-shared.module.css
index 7f5844f04..218630ab4 100644
--- a/packages/react/src/river/river-shared.module.css
+++ b/packages/react/src/river/river-shared.module.css
@@ -166,6 +166,10 @@
   width: 1px;
 }
 
+.RiverBreakout .River__call-to-action {
+  margin-block-end: var(--base-size-40);
+}
+
 @media screen and (min-width: 48rem) {
   .RiverBreakout .River__content {
     display: grid;
@@ -174,11 +178,16 @@
       'text trailingComponent'
       'cta trailingComponent';
     grid-template-columns: 5fr 3fr;
+    grid-auto-rows: auto 1fr;
+  }
+
+  .RiverBreakout .River__text {
+    grid-area: text;
   }
 
   .RiverBreakout .River__call-to-action {
     grid-area: cta;
-    margin-block-start: 0;
+    margin-block: 0;
   }
 
   .RiverBreakout .River__trailingComponent {
@@ -186,8 +195,4 @@
     justify-self: end;
     margin-block-start: 0;
   }
-
-  .RiverBreakout .River__text {
-    grid-area: text;
-  }
 }