From 242e9e705545a7da5ffedc037783e0236092ef61 Mon Sep 17 00:00:00 2001
From: Benjamin Rush <bnjmnrsh@gmail.com>
Date: Wed, 18 Sep 2024 16:46:17 -0400
Subject: [PATCH] Subject: Reason for Commit:

Summary:

Notes:
---
 src/pages/styleguide/flourish-page.astro | 36 +++++++++++++-----------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/pages/styleguide/flourish-page.astro b/src/pages/styleguide/flourish-page.astro
index a5390dc..c1835c4 100644
--- a/src/pages/styleguide/flourish-page.astro
+++ b/src/pages/styleguide/flourish-page.astro
@@ -36,9 +36,9 @@ import Flourish from '../../components/Flourish.astro'
           </div>
         </section>
 
-        <section class="grid">
+        <section>
           <h3>Flourish Properties</h3>
-          <div class="grid pa-0 grid-cols-3 pb-4 bt">
+          <div class="pa-0 grid-ns grid-cols-3 pb-4 bt">
             <ul class="list f7">
               <li><code>--alder</code></li>
               <li><code>--apple</code></li>
@@ -81,8 +81,10 @@ import Flourish from '../../components/Flourish.astro'
           </div>
           <section>
             <h3>Flourish Examples</h3>
-            <ul class="list bt pt-5 grid grid-cols-2 gap-5">
-              <li>
+            <ul
+              class="list bt pt-5 grid-ns grid-cols-1 grid-cols-2-ns gap-5 gap-4-ns"
+            >
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--alder', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -92,7 +94,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--apple', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -102,7 +104,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--aspen', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -112,7 +114,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--beech', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -122,7 +124,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--downybirch', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -132,7 +134,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--englishoak', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -142,7 +144,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--fieldmaple', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -152,7 +154,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--greywillow', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -162,7 +164,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--hawthorn', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -172,7 +174,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--holly', 'dropcap', '--dc-brand-purple-dk']}
                 >
@@ -182,7 +184,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={[
                     '--horsechestnut',
@@ -196,7 +198,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={[
                     '--rowan-berries',
@@ -210,7 +212,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={[
                     '--rowan-leaves',
@@ -224,7 +226,7 @@ import Flourish from '../../components/Flourish.astro'
                   </p>
                 </Flourish>
               </li>
-              <li>
+              <li class="pa-1 mt-4 mb-4 mt-0-ns mb-0-ns">
                 <Flourish
                   classes={['--silverbirch', 'dropcap', '--dc-brand-purple-dk']}
                 >