resolve long vertical card in mobile view

Author: jinkang-0

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;

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 {