From b40999c6462f6a1fec37015e6c0158c87685573a Mon Sep 17 00:00:00 2001
From: Beverly Nguyen <Beverly.Nguyen@gsa.gov>
Date: Fri, 17 Jan 2025 13:42:59 -0800
Subject: [PATCH] adjust styling and content cards

---
 app/assets/sass/uswds/_legacy-styles.scss     |  2 +-
 .../views/about/why-text-messaging.html       | 24 ++++++++++---------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/app/assets/sass/uswds/_legacy-styles.scss b/app/assets/sass/uswds/_legacy-styles.scss
index 85da173213..4af2cc6f6f 100644
--- a/app/assets/sass/uswds/_legacy-styles.scss
+++ b/app/assets/sass/uswds/_legacy-styles.scss
@@ -8,7 +8,7 @@
   width: 100%;
   max-width: 464px;
   box-sizing: border-box;
-  padding: units(1);
+  padding: units(2);
   background: color('gray-cool-10');
   border: 1px solid color('gray-cool-10');
   border-radius: 5px;
diff --git a/app/templates/views/about/why-text-messaging.html b/app/templates/views/about/why-text-messaging.html
index d1b881b7cb..c0d6a29a15 100644
--- a/app/templates/views/about/why-text-messaging.html
+++ b/app/templates/views/about/why-text-messaging.html
@@ -51,35 +51,37 @@ <h2 id="what-texting-is-best-for">What texting is best for</h2>
   {
   "image_src": asset_url('images/calendar.svg'),
   "card_heading": "Reminders",
-  "p_text": "In a text bubble // Your Quality Control food phone interview is on ((date)) at ((time)). Failure to
+  "p_text": "Your Quality Control food phone interview is on ((date)) at ((time)). Failure to
   attend may lead to closure of your benefits. Call 1-800-222-3333 with questions.",
   "alt_text": "reminder text example"
   },
   {
   "image_src": asset_url('images/alert.svg'),
   "card_heading": "Alerts to take action",
-  "p_text": "In a text bubble // Your household's Medicaid coverage is expiring. To keep getting Medicaid, you must
+  "p_text": "Your household's Medicaid coverage is expiring. To keep getting Medicaid, you must
   complete your renewal by ((date)). You can renew online at dhs.state.gov…",
   "alt_text": "alerts text example"
   },
   {
   "image_src": asset_url('images/alarm.svg'),
   "card_heading": "Important status updates",
-  "p_text": "In a text bubble // Your passport has been issued at the Los Angeles Passport Agency. Please come to the
+  "p_text": "Your passport has been issued at the Los Angeles Passport Agency. Please come to the
   desk between 1:30pm and 2:30pm today to pick up your passport…",
   "alt_text": "status update text example"
   },
   ] %}
   {% for item in card_contents %}
-  <div class="radius-lg border-2px maxw-tablet">
-    <div class="grid-row grid-gap-4 padding-2 padding-x-3 flex-align-center">
-      <div class="grid-col flex-3">
-        <p><b>{{item.card_heading}}</b></p>
-        <p>{{item.p_text}}</p>
+  <div class="grid-container-tablet padding-3 radius-lg border-2px margin-left-0 ">
+    <h3 class="usa-card__heading padding-y-2">{{item.card_heading}}</h3>
+    <div class="grid-row grid-gap-3 flex-align-center">
+      <div class="grid-col-auto ">
+        <p class="sms-message-wrapper">{{item.p_text}}</p>
+      </div>
+      <div class="grid-col-fill">
+        {% if item.image_src %}
+        <img src="{{ item.image_src }}" alt="{{ item.alt_text }}" class="height-15" />
+        {% endif %}
       </div>
-      {% if item.image_src %}
-      <img src="{{item.image_src}}" alt="{{ item.alt_text }}" class="height-15" />
-      {% endif %}
     </div>
   </div>
   {% endfor %}