From f3e1745f83f98ec3e5a613e70e0bb5bb1a9ff700 Mon Sep 17 00:00:00 2001
From: jinkang-0 <jinkang.fang@gmail.com>
Date: Tue, 20 Feb 2024 12:50:16 -0800
Subject: [PATCH] resolve long vertical card in mobile view

---
 src/components/NonProfit.astro  |  6 ++++++
 src/components/NonProfits.astro | 22 ++++++++--------------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/NonProfit.astro b/src/components/NonProfit.astro
index f67c3d2..c7d907e 100644
--- a/src/components/NonProfit.astro
+++ b/src/components/NonProfit.astro
@@ -38,6 +38,12 @@ const { name, description, image, startColor, endColor, url } = Astro.props;
     flex-direction: column;
     justify-content: flex-end;
 
+    &:last-child {
+      @media (min-width: breakpoints.$laptop) {
+        grid-column: 2;
+      }
+    }
+
     .bg {
       position: absolute;
       top: 0;
diff --git a/src/components/NonProfits.astro b/src/components/NonProfits.astro
index 07f9f65..30effd7 100644
--- a/src/components/NonProfits.astro
+++ b/src/components/NonProfits.astro
@@ -69,16 +69,14 @@ import clouds from '../graphics/clouds_star_twirl_2.svg';
       endColor="rgba(165, 51, 214, 1)"
       url="https://www.queerlifespace.org/"
     />
-    <div class="centered">
-      <NonProfit
-        name="ARTZ Philadelphia"
-        description="Enhance well-being of people living with dementia and their care partners through joyful interactions around arts and culture."
-        image="/nonprofits/artz.jpg"
-        startColor="rgba(91, 192, 222, 0.3)"
-        endColor="rgba(91, 192, 222, 1)"
-        url="https://www.artzphilly.org/"
-      />
-    </div>
+    <NonProfit
+      name="ARTZ Philadelphia"
+      description="Enhance well-being of people living with dementia and their care partners through joyful interactions around arts and culture."
+      image="/nonprofits/artz.jpg"
+      startColor="rgba(91, 192, 222, 0.3)"
+      endColor="rgba(91, 192, 222, 1)"
+      url="https://www.artzphilly.org/"
+    />
   </section>
 </div>
 
@@ -127,10 +125,6 @@ import clouds from '../graphics/clouds_star_twirl_2.svg';
       padding: 0 156px;
       grid-template-columns: 1fr 1fr 1fr;
     }
-
-    .centered {
-      grid-column: 2;
-    }
   }
 
   .container {