From 817ebbe923a2e28fcbfccc9aa89ab2a235bcd54e Mon Sep 17 00:00:00 2001
From: Jonathan Bobel <jonathan.bobel@gsa.gov>
Date: Fri, 28 Jul 2023 11:10:02 -0400
Subject: [PATCH] Small class rearrangement on landing page (#646)

---
 app/templates/views/signedout.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/templates/views/signedout.html b/app/templates/views/signedout.html
index a7ebe74f9..706e0d1ec 100644
--- a/app/templates/views/signedout.html
+++ b/app/templates/views/signedout.html
@@ -12,10 +12,10 @@ U.S. Notify
 
 {% block content %}
 
-<section aria-label="Introduction">
-  <div class="grid-container usa-section usa-section--dark padding-y-4">
+<section class="usa-section--dark" aria-label="Introduction">
+  <div class="grid-container padding-y-4">
     <div class="grid-row grid-gap display-flex flex-align-center">
-      <div class="tablet:grid-col-7">
+      <div class="desktop:grid-col-7 tablet:grid-col-12">
         <h1 class="font-serif-2xl usa-hero__heading">Send text messages to your participants</h1>
         <p class="font-sans-lg">U.S. Notify is a text messaging service that helps federal, state, local, tribal, and territorial governments more
         effectively communicate with their program participants.</p>
@@ -26,7 +26,7 @@ U.S. Notify
         </div>
         <p class="font-sans-md">If you are interested in using U.S. Notify in the future, please contact <br><a href="mailto:tts-benefits-studio@gsa.gov">tts-benefits-studio@gsa.gov</a> to learn more.</p>
       </div>
-      <div class="tablet:grid-col-4 margin-x-5">
+      <div class="desktop:grid-col-4 grid-offset-1 desktop:display-block display-none margin-x-5">
         <img src="{{ asset_url('images/product/phone-text.png') }}"
           alt="An illustration of notifications to a phone.">
       </div>
@@ -35,13 +35,13 @@ U.S. Notify
 </section>
 <section class="grid-container usa-section">
   <div class="grid-row grid-gap">
-    <div class="tablet:grid-col-5 usa-prose">
+    <div class="tablet:grid-col-5 margin-bottom-3 usa-prose">
       <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
         Control your content
       </h2>
       <p>You do not need any technical knowledge to create message templates.</p>
     </div>
-    <div class="tablet:grid-col-6 grid-offset-1">
+    <div class="tablet:grid-col-6 tablet:grid-offset-1">
       <img src="{{ asset_url('images/product/01-templates-no-chrome.svg') }}"
         alt="Example screenshot of adding a new text message template">
     </div>
@@ -49,13 +49,13 @@ U.S. Notify
 </section>
 <section class="grid-container usa-section">
   <div class="grid-row grid-gap">
-    <div class="tablet:grid-col-5 usa-prose">
+    <div class="tablet:grid-col-5 margin-bottom-3 usa-prose">
       <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
         See how your messages perform
       </h2>
       <p>Track how many messages you’ve sent and find out which ones are not being delivered.</p>
     </div>
-    <div class="tablet:grid-col-6 grid-offset-1">
+    <div class="tablet:grid-col-6 tablet:grid-offset-1">
       <img src="{{ asset_url('images/product/02-reporting-no-chrome.svg') }}"
         alt="A screenshot of U.S. Notify showing counts of emails and text messages sent">
     </div>
@@ -63,13 +63,13 @@ U.S. Notify
 </section>
 <section class="grid-container usa-section">
   <div class="grid-row grid-gap">
-    <div class="tablet:grid-col-5 usa-prose">
+    <div class="tablet:grid-col-5 margin-bottom-3 usa-prose">
       <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
         No technical integration needed
       </h2>
       <p>Upload a spreadsheet of phone numbers and U.S. Notify sends batches of messages for you.</p>
     </div>
-    <div class="tablet:grid-col-6 grid-offset-1">
+    <div class="tablet:grid-col-6 tablet:grid-offset-1">
       <img src="{{ asset_url('images/product/03-spreadsheet-no-chrome.svg') }}"
         alt="A screenshot of a spreadsheet with phone numbers, names, and a reference number">
     </div>