From 72a1d2bfc4cebdd9f699ccc25702d1119f4906a8 Mon Sep 17 00:00:00 2001
From: Rick Peterman <rick.peterman@prx.org>
Date: Thu, 5 Dec 2024 12:53:22 -0600
Subject: [PATCH] fix(finances): sm layout of revenue

- fix overflow issues at large mobile sizes
- add balanced text wrapping to quotes and titles
---
 _data/financials.json | 7 +++++--
 _sass/_content.scss   | 5 +++++
 _sass/_finances.scss  | 2 +-
 _sass/_show.scss      | 3 +++
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/_data/financials.json b/_data/financials.json
index 8393279..009b8f6 100644
--- a/_data/financials.json
+++ b/_data/financials.json
@@ -35,9 +35,12 @@
     "type": "revenue",
     "color": "yellow",
     "positions": [
+      {
+        "value": "auto / 1 / span 2 / -1"
+      },
       {
         "breakpoint": "sm",
-        "value": "auto / 1 / span 1 / span 3"
+        "value": "auto / 1 / span 1 / -1"
       }
     ]
   },
@@ -49,7 +52,7 @@
     "positions": [
       {
         "breakpoint": "sm",
-        "value": "auto / 4 / span 1 / span 3"
+        "value": "auto / 1 / span 1 / span 6"
       }
     ]
   },
diff --git a/_sass/_content.scss b/_sass/_content.scss
index 08acdea..3295988 100644
--- a/_sass/_content.scss
+++ b/_sass/_content.scss
@@ -84,6 +84,7 @@
   grid-column: wide;
   justify-self: center;
   margin-bottom: 0;
+  text-wrap: balance;
 }
 
 .content-quote {
@@ -112,12 +113,15 @@
   grid-column: wide;
   justify-self: center;
   text-align: center;
+  text-wrap: balance;
 
   blockquote.image {
     display: grid;
     column-gap: var(--_content--column-gap);
     row-gap: var(--_content--row-gap);
 
+    text-wrap: balance;
+
     img {
       border-radius: 20px;
       box-shadow: 10px -10px 0px 0px var(--_content--accent--color1), -10px 10px 0px 0px var(--_content--accent--color2);
@@ -143,6 +147,7 @@
   grid-column: wide;
   justify-self: center;
   text-align: center;
+  text-wrap: balance;
 
   .quote-text {
     &::before {
diff --git a/_sass/_finances.scss b/_sass/_finances.scss
index 6780bcb..18271e3 100644
--- a/_sass/_finances.scss
+++ b/_sass/_finances.scss
@@ -3,6 +3,7 @@
 
   .content-main {
     grid-column: full-width;
+    padding-inline: 2rem;
   }
 }
 
@@ -27,7 +28,6 @@
 
   max-width: 1600px;
 
-  padding-inline: 2rem;
   margin-inline: auto;
 
   @container (width > #{$min-width}) {
diff --git a/_sass/_show.scss b/_sass/_show.scss
index 3ccf52b..bf93b15 100644
--- a/_sass/_show.scss
+++ b/_sass/_show.scss
@@ -95,6 +95,7 @@
   grid-column: wide;
   justify-self: center;
   margin-bottom: 0;
+  text-wrap: balance;
 }
 
 .show-quote {
@@ -115,6 +116,7 @@
   blockquote {
     padding: calc(var(--_show--row-gap) / 1.5);
     border-left: 3px dotted var(--_show--accent--color1);
+    text-wrap: balance;
   }
 }
 
@@ -444,6 +446,7 @@
   grid-column: wide;
   justify-self: center;
   text-align: center;
+  text-wrap: balance;
 
   .quote-text {
     &::before {