Updated images and styles

app/assets/sass/uswds/_home.scss

@@ -14,21 +14,37 @@
 }
 
 .usa-hero > .grid-container {
-    @media (max-width: units('desktop')) {
+    @media (max-width: units('tablet')) {
         padding-top: 1rem;
         padding-bottom: 1rem;
     }
 }
 
 .usa-section {
+    &.key-features {
+        background-color: color('gray-cool-2');
+    }
+    &.security-and-privacy {
+        img {
+            filter: brightness(0) saturate(100%) invert(22%) sepia(98%) saturate(1829%) hue-rotate(187deg) brightness(88%) contrast(101%);
+        }
+    }
     &__home {
         h2 {
             font-size: units(6);
             line-height: 1.2;
+            @media (max-width: units('desktop')) {
+                font-size: units(4);
+            }
         }
         p {
             font-size: 20px;
         }
+        img {
+            @media (max-width: units('tablet')) {
+                max-width: 60%;
+            }
+        }
     }
 }
 
@@ -39,6 +55,7 @@
         text-align: center;
         overflow: hidden;
         border: 0;
+        background-color: transparent;
         .img-container {
             width: units('card');
             height: units('card');

app/templates/views/signedout.html

@@ -35,10 +35,12 @@ import usaButton %} {% block meta %}
   </section>
   <section class="grid-container usa-section usa-section__home border-top border-base-lighter usa-prose padding-bottom-4">
     <div class="grid-row flex-align-center flex-justify-center">
-      <div class="tablet:grid-col-4 mobile-lg:grid-col-12">
+      <div class="tablet:grid-col-4 mobile-lg:grid-col-12 display-flex flex-justify-center margin-bottom-6">
-        <img src="{{ asset_url('images/product/people-with-phone.png') }}" alt="A couple smiling and looking at a cell phone together"/>
+        <img
+          src="{{ asset_url('images/product/couple-looking-at-phone.png') }}"
+          alt="A couple smiling and looking at a cell phone together"/>
       </div>
-      <div class="tablet:grid-col-6 tablet:margin-left-6 mobile-lg:grid-col-12">
+      <div class="tablet:grid-col-6 tablet:margin-left-8 mobile-lg:grid-col-12">
         <h2 class="font-body-xl margin-top-0 margin-bottom-3">
           Government texting made easy
         </h2>
@@ -52,9 +54,9 @@ import usaButton %} {% block meta %}
     </div>
   </section>
 
-  <section class="grid-container usa-section usa-section__home usa-prose padding-bottom-4">
+  <section class="usa-section usa-section__home usa-prose key-features padding-bottom-4">
     <h2 class="text-center margin-top-0">Key features</h2>
-    <div class="home-cards margin-top-5">
+    <div class="grid-container home-cards margin-top-5">
       <ul class="usa-card-group display-flex margin-bottom-4">
         <li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
           <div class="usa-card__container">
@@ -106,7 +108,7 @@ import usaButton %} {% block meta %}
         </li>
       </ul>
       <ul class="usa-card-group">
-        <li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
+        <li class="usa-card tablet:grid-offset-2 tablet:grid-col-4 mobile-lg:grid-col-12">
           <div class="usa-card__container">
             <div class="img-container">
               <img
@@ -122,25 +124,6 @@ import usaButton %} {% block meta %}
             </div>
           </div>
         </li>
-        <li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
-          <div class="usa-card__container">
-            <div class="img-container">
-              <img
-                src="{{ asset_url('images/security.svg') }}"
-                alt=""
-              />
-            </div>
-            <div class="usa-card__header">
-              <h3 class="padding-bottom-0">Security and privacy</h3>
-            </div>
-            <div class="usa-card__body">
-              <p>
-                Limited data retention, encryption, and multi-factor
-                authentication protect user data and manage risk with <br><a href="/about/security">our security efforts</a>
-              </p>
-            </div>
-          </div>
-        </li>
         <li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
           <div class="usa-card__container">
             <div class="img-container">
@@ -166,9 +149,35 @@ import usaButton %} {% block meta %}
     </div>
   </section>
 
-  <section class="grid-container usa-section usa-section__home usa-prose grid-container margin-bottom-15">
+  <section class="usa-section usa-section__home usa-prose security-and-privacy padding-y-6 bg-base-lighter">
+    <div class="grid-container">
+      <div class="grid-row flex-align-center flex-justify-center">
+        <div class="tablet:grid-col-7 mobile-lg:grid-col-12 margin-bottom-4">
+          <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
+            Security and privacy
+          </h2>
+          <p class="usa-body margin-bottom-5">
+            Limited data retention, encryption, and multi-factor authentication protect user data and manage risk.
+          </p>
+          <a class="usa-button usa-button--big" href="/join-notify">Our security efforts</a>
+        </div>
+        <div class="tablet:grid-col-3 mobile-lg:grid-col-12 display-flex flex-justify-center">
+          <img
+            class="width-card-lg"
+            src="{{ asset_url('images/security.svg') }}"
+            alt=""
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="grid-container usa-section usa-section__home usa-prose margin-bottom-15">
     <div class="grid-row flex-align-center flex-justify-center">
-      <div class="tablet:grid-col-6 mobile-lg:grid-col-12 margin-right-6 margin-bottom-6">
+      <div class="tablet:grid-col-4 mobile-lg:grid-col-12 display-flex flex-justify-center margin-right-8 margin-bottom-5">
+        <img src="{{ asset_url('images/product/who-can-use-notify.png') }}" alt="Woman smiling behind two computer screens"/>
+      </div>
+      <div class="tablet:grid-col-6 mobile-lg:grid-col-12">
         <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
           Who can use Notify.gov?
         </h2>
@@ -185,9 +194,6 @@ import usaButton %} {% block meta %}
         </p>
         <a class="usa-button usa-button--big" href="/join-notify">Become a Notify.gov partner</a>
       </div>
-      <div class="tablet:grid-col-4 mobile-lg:grid-col-12 display-flex flex-justify-center"">
-        <img src="{{ asset_url('images/product/who-can-use-notify.png') }}" alt="Woman smiling behind two computer screens"/>
-      </div>
   </section>
   {% endblock %}
 </main>