From 3ce0ed958ed621a45115287c9f0aac2c975a1903 Mon Sep 17 00:00:00 2001
From: Dinne Kopelevich <dinne.kopelevich@gsa.gov>
Date: Sun, 9 Feb 2025 18:37:58 -0700
Subject: [PATCH] Fix responsiveness on home cards

Signed-off-by: Dinne Kopelevich <dinne.kopelevich@gsa.gov>
---
 app/site/index.liquid |  4 ++--
 app/src/css/style.css | 43 ++++++++++++++++++++++++++++++++++---------
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/app/site/index.liquid b/app/site/index.liquid
index 3dce015712..989d356cb0 100644
--- a/app/site/index.liquid
+++ b/app/site/index.liquid
@@ -18,7 +18,7 @@ layout: base
     </p>
   </section>
   <ul class="usa-card-group-home">
-    <li class="usa-card tablet:grid-col-6">
+    <li class="usa-card tablet:grid-col-9">
       <div class="usa-card-outer">
         <div class="usa-card-middle">
           <a href="{{ "/organizations/" | url}}" class="href-home">
@@ -41,7 +41,7 @@ layout: base
         </div>
       </div>
     </li>
-    <li class="usa-card tablet:grid-col-6">
+    <li class="usa-card tablet:grid-col-9">
       <div class="usa-card-outer">
         <div class="usa-card-middle">
           <a href="{{ "/projects/" | url}}" class="href-home">
diff --git a/app/src/css/style.css b/app/src/css/style.css
index 3bedd6c344..38d46449f7 100644
--- a/app/src/css/style.css
+++ b/app/src/css/style.css
@@ -90,18 +90,19 @@ h2 {
 /* Cards */
 .usa-card-group-home {
   display: flex;
-  flex-direction: row;
-  list-style-type: none;
-  margin-left: -80px;
+  flex-direction: column;
+  width: 95vw;
+  align-items: center;
+  margin-left: -8%;
 }
 
 .usa-card-outer {
   display: flex;
   background-color: #043884;
   border: none;
-  border-radius: 70px;
-  height: 20vh;
-  width: 25vw;
+  border-radius: 100px;
+  height: 15vh;
+  width: 100%;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 }
 
@@ -109,7 +110,7 @@ h2 {
   display: flex;
   background-color: #5C85C1;
   border: none;
-  border-radius: 70px;
+  border-radius: 100px;
   height: 100%;
   margin-left: -5px;
   width: 98%;
@@ -137,7 +138,7 @@ h2 {
   align-items: center;
   background-color: #E0EAF8;
   border: none;
-  border-radius: 70px;
+  border-radius: 100px;
   display: flex;
   flex-direction: row;
   height: 100%;
@@ -152,7 +153,7 @@ h2 {
   background-color: #fff;
   border-radius: 50%;
   display: flex;
-  height: 100px;
+  height: 75px;
   justify-content: center;
   margin-left: 6%;
   width: 100px;
@@ -672,6 +673,10 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
   .graph-box {
     height: 600px;
   }
+
+  .home-icon-container {
+    height: 90px;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -697,4 +702,24 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
   .usa-nav-link {
     text-decoration: none;
   }
+
+  .usa-card-group-home {
+    display: flex;
+    flex-direction: row;
+    margin-left: 0;
+  }
+
+  .usa-card-outer {
+    height: 20vh;
+  }
+
+  .usa-card-outer,
+  .usa-card-middle,
+  .usa-card__container {
+    border-radius: 80px;
+  }
+
+  .home-icon-container {
+    height: 100px;
+  }
 }
\ No newline at end of file