Refactor navigation layout and styles: update the find-a-doula navigation structure to use new SCSS classes for better organization, enhance responsiveness with flexbox, and improve semantic clarity in HTML. Adjust JSON configuration to include new class names for navigation elements.

markgoho · markgoho · commit bdadac3f9265 · 2025-07-31T12:37:56.000-04:00
diff --git a/hugo/assets/scss/components/nav-card.scss b/hugo/assets/scss/components/nav-card.scss
@@ -1,13 +1,30 @@
-.nav-card {
-  display: grid;
-  grid-template-rows: min-content minmax(5ch, max-content) 1fr;
-  justify-items: center;
-  padding: var(--space-m);
+.nav-cards-container {
+  container: nav-cards / inline-size;
+  // outline: 1px solid red;
+}
+
+.nav-card-container {
+  container: nav-card / inline-size;
+  flex-grow: 1;
+  padding: var(--space-s);
   border: 5px solid var(--brown-400);
   border-radius: var(--spacing-btn-radius);
-  text-decoration: none;
-  // height: 100%;
   background-color: var(--brown-000);
+}
+
+.nav-cards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-s);
+}
+
+.nav-card {
+  display: grid;
+  gap: var(--space-xs);
+  grid-template-columns: 1fr 3fr;
+  place-items: center;
+  text-decoration: none;
+  // width: max-content;
 
   &:hover {
     border-color: var(--teal-500);
@@ -21,20 +38,25 @@
 
   .nav-card__title {
     text-align: center;
-    margin-bottom: var(--space-s);
+    margin: 0;
   }
 
   .nav-card__description {
     text-align: center;
-    max-width: 40ch;
-    margin-inline: auto;
+    // max-width: 40ch;
+    margin: 0;
+    grid-column: 1 / -1;
   }
 }
 
 .small {
+  margin-block-start: var(--space-l);
+
+  .nav-cards {
+    justify-content: center;
+  }
+
   .nav-card {
-    padding: var(--space-s);
-    border-width: 4px;
     display: block;
     text-align: center;
   }
@@ -53,3 +75,14 @@
     display: none;
   }
 }
+
+@container nav-cards (min-width: 50rem) {
+  .nav-cards {
+    flex-direction: row;
+  }
+
+  .nav-card {
+    grid-template-columns: auto;
+    grid-template-rows: min-content minmax(5ch, max-content) 1fr;
+  }
+}
diff --git a/hugo/assets/scss/find-a-doula.scss b/hugo/assets/scss/find-a-doula.scss
@@ -10,19 +10,6 @@ section > p:first-child {
   margin-block: var(--space-m);
 }
 
-.find-a-doula-nav {
-  display: flex;
-  gap: var(--space-l);
-  list-style: none;
-  padding: 0;
-  margin: var(--space-l) 0;
-}
-
-.find-a-doula-nav.small {
-  margin-block: var(--space-xl);
-  justify-content: center;
-}
-
 @container (max-width: 50rem) {
   .search-section .search-form,
   .contact-section .contact-form .date-fields {
@@ -33,10 +20,3 @@ section > p:first-child {
     width: 100%;
   }
 }
-
-@container (max-width: 30rem) {
-  .find-a-doula-nav.small {
-    flex-direction: column;
-    align-items: center;
-  }
-}
diff --git a/hugo/assets/scss/landing-page.scss b/hugo/assets/scss/landing-page.scss
@@ -85,6 +85,7 @@
   }
 }
 .cta-cards {
+  container: nav-cards / inline-size;
   display: flex;
   flex-direction: column;
   gap: var(--space-m);
diff --git a/hugo/hugo_stats.json b/hugo/hugo_stats.json
@@ -102,11 +102,16 @@
       "main",
       "membership-cta",
       "membership-join",
+      "n",
       "name",
       "nav-card",
+      "nav-card-container",
       "nav-card__description",
       "nav-card__icon",
       "nav-card__title",
+      "nav-cards",
+      "nav-cards-",
+      "nav-cards-container",
       "navbar",
       "navbar__button",
       "navbar__cta",
diff --git a/hugo/layouts/index.html b/hugo/layouts/index.html
diff --git a/hugo/layouts/partials/find-a-doula-nav.html b/hugo/layouts/partials/find-a-doula-nav.html
@@ -1,56 +1,59 @@
 <section
-  class="find-a-doula-nav
+  class="nav-cards-container find-a-doula-nav
   {{ if or (in .Permalink "/search/") (in .Permalink "/browse/") (in .Permalink "/match/") }}
     small
   {{ end }}">
-  <a href="/find-a-doula/search/" class="nav-card">
-    <svg
-      class="nav-card__icon"
-      viewBox="0 0 112 112"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M100.476 95.5238L78.5706 73.6225C84.9198 66 88.0858 56.2231 87.4101 46.3257C86.7343 36.4284 82.2689 27.1725 74.9426 20.4836C67.6164 13.7948 57.9935 10.1879 48.0756 10.4133C38.1578 10.6387 28.7086 14.679 21.6938 21.6938C14.679 28.7086 10.6387 38.1578 10.4133 48.0756C10.1879 57.9935 13.7948 67.6164 20.4836 74.9426C27.1725 82.2689 36.4284 86.7343 46.3257 87.4101C56.2231 88.0858 66 84.9198 73.6225 78.5706L95.5238 100.476C95.849 100.801 96.235 101.059 96.6599 101.235C97.0848 101.411 97.5401 101.502 98 101.502C98.4599 101.502 98.9153 101.411 99.3402 101.235C99.765 101.059 100.151 100.801 100.476 100.476C100.801 100.151 101.059 99.765 101.235 99.3402C101.411 98.9153 101.502 98.4599 101.502 98C101.502 97.5401 101.411 97.0848 101.235 96.6599C101.059 96.235 100.801 95.849 100.476 95.5238ZM17.5 49C17.5 42.7699 19.3475 36.6797 22.8087 31.4996C26.27 26.3194 31.1896 22.282 36.9455 19.8978C42.7014 17.5137 49.035 16.8899 55.1454 18.1053C61.2558 19.3207 66.8685 22.3208 71.2739 26.7262C75.6792 31.1315 78.6793 36.7443 79.8948 42.8547C81.1102 48.9651 80.4864 55.2987 78.1022 61.0545C75.7181 66.8104 71.6806 71.73 66.5005 75.1913C61.3203 78.6526 55.2301 80.5 49 80.5C40.6485 80.4908 32.6418 77.169 26.7364 71.2637C20.831 65.3583 17.5093 57.3515 17.5 49Z"
-        fill="var(--teal-500)" />
-    </svg>
-
-    <h2 class="nav-card__title">Search</h2>
-    <p class="nav-card__description">
-      Search across all Doula profiles, bios, specializations, and locations
-    </p>
-  </a>
-
-  <a href="/find-a-doula/browse/" class="nav-card">
-    <svg
-      class="nav-card__icon"
-      viewBox="0 0 112 112"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M66.5 34.9999C66.5 34.0716 66.8687 33.1814 67.5251 32.525C68.1815 31.8686 69.0717 31.4999 70 31.4999H108.5C109.428 31.4999 110.318 31.8686 110.975 32.525C111.631 33.1814 112 34.0716 112 34.9999C112 35.9281 111.631 36.8184 110.975 37.4747C110.318 38.1311 109.428 38.4999 108.5 38.4999H70C69.0717 38.4999 68.1815 38.1311 67.5251 37.4747C66.8687 36.8184 66.5 35.9281 66.5 34.9999ZM108.5 52.4999H70C69.0717 52.4999 68.1815 52.8686 67.5251 53.525C66.8687 54.1814 66.5 55.0716 66.5 55.9999C66.5 56.9281 66.8687 57.8184 67.5251 58.4747C68.1815 59.1311 69.0717 59.4999 70 59.4999H108.5C109.428 59.4999 110.318 59.1311 110.975 58.4747C111.631 57.8184 112 56.9281 112 55.9999C112 55.0716 111.631 54.1814 110.975 53.525C110.318 52.8686 109.428 52.4999 108.5 52.4999ZM108.5 73.4999H80.5C79.5717 73.4999 78.6815 73.8686 78.0251 74.525C77.3687 75.1814 77 76.0716 77 76.9999C77 77.9281 77.3687 78.8184 78.0251 79.4747C78.6815 80.1311 79.5717 80.4999 80.5 80.4999H108.5C109.428 80.4999 110.318 80.1311 110.975 79.4747C111.631 78.8184 112 77.9281 112 76.9999C112 76.0716 111.631 75.1814 110.975 74.525C110.318 73.8686 109.428 73.4999 108.5 73.4999ZM66.3906 83.1249C66.505 83.5701 66.5306 84.0336 66.4659 84.4887C66.4012 84.9439 66.2474 85.3818 66.0134 85.7775C65.7794 86.1732 65.4697 86.519 65.102 86.795C64.7344 87.071 64.3159 87.2718 63.8706 87.3861C63.5854 87.463 63.2911 87.5012 62.9956 87.4999C62.2194 87.5002 61.465 87.2426 60.8512 86.7674C60.2375 86.2922 59.7991 85.6264 59.605 84.8749C56.91 74.4011 46.3312 66.4999 34.9956 66.4999C23.66 66.4999 13.0812 74.3967 10.3862 84.8749C10.1542 85.7741 9.57439 86.5443 8.77443 87.0161C7.97447 87.4879 7.01986 87.6225 6.12062 87.3905C5.22137 87.1584 4.45113 86.5786 3.97936 85.7787C3.50759 84.9787 3.37293 84.0241 3.60499 83.1249C6.05062 73.6267 13.16 65.9355 22.1812 62.1249C18.7076 59.4494 16.1586 55.7537 14.8915 51.5563C13.6245 47.3588 13.7031 42.87 15.1163 38.7194C16.5294 34.5689 19.2062 30.9647 22.7714 28.4124C26.3365 25.8602 30.6111 24.4878 34.9956 24.4878C39.3802 24.4878 43.6547 25.8602 47.2199 28.4124C50.785 30.9647 53.4618 34.5689 54.875 38.7194C56.2881 42.87 56.3667 47.3588 55.0997 51.5563C53.8327 55.7537 51.2836 59.4494 47.81 62.1249C56.8356 65.9355 63.945 73.6267 66.3906 83.1249ZM35 59.4999C37.7689 59.4999 40.4757 58.6788 42.778 57.1404C45.0803 55.6021 46.8747 53.4156 47.9343 50.8574C48.9939 48.2993 49.2712 45.4843 48.731 42.7686C48.1908 40.0529 46.8574 37.5583 44.8995 35.6004C42.9416 33.6424 40.447 32.3091 37.7313 31.7689C35.0155 31.2287 32.2006 31.5059 29.6424 32.5655C27.0843 33.6252 24.8978 35.4196 23.3594 37.7219C21.8211 40.0242 21 42.7309 21 45.4999C21 49.2129 22.475 52.7738 25.1005 55.3993C27.726 58.0249 31.287 59.4999 35 59.4999Z"
-        fill="var(--teal-500)" />
-    </svg>
-
-    <h2 class="nav-card__title">Browse</h2>
-    <p class="nav-card__description">
-      Discover doulas across a variety of professional service categories
-    </p>
-  </a>
-
-  <a href="/find-a-doula/match/" class="nav-card">
-    <svg
-      class="nav-card__icon"
-      viewBox="0 0 112 112"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M111.256 47.2107L100.091 24.872C99.68 24.0497 99.1108 23.3166 98.4161 22.7144C97.7214 22.1122 96.9149 21.6528 96.0427 21.3623C95.1704 21.0718 94.2495 20.956 93.3325 21.0215C92.4155 21.0869 91.5203 21.3324 90.6982 21.7438L79.8176 27.182L56.8969 21.1182C56.3088 20.9652 55.6913 20.9652 55.1032 21.1182L32.1826 27.182L21.3019 21.7438C20.4798 21.3324 19.5846 21.0869 18.6676 21.0215C17.7506 20.956 16.8297 21.0718 15.9574 21.3623C15.0852 21.6528 14.2787 22.1122 13.584 22.7144C12.8894 23.3166 12.3201 24.0497 11.9088 24.872L0.743803 47.2063C0.33236 48.0285 0.0868977 48.9236 0.0214323 49.8406C-0.044033 50.7576 0.0717812 51.6786 0.362261 52.5508C0.652741 53.4231 1.1122 54.2296 1.71439 54.9242C2.31658 55.6189 3.04972 56.1881 3.87193 56.5995L15.6844 62.5101L39.9613 79.8482C40.319 80.1027 40.7211 80.2882 41.1469 80.3951L69.1469 87.3951C69.7333 87.5421 70.3478 87.5348 70.9305 87.3738C71.5132 87.2128 72.0442 86.9036 72.4719 86.4763L96.5651 62.3788L108.124 56.5995C109.783 55.7688 111.045 54.3132 111.631 52.5526C112.218 50.7921 112.081 48.8707 111.252 47.2107H111.256ZM87.2419 61.8101L72.1876 49.7526C71.5131 49.2125 70.6628 48.9409 69.8001 48.9902C68.9375 49.0395 68.1236 49.4061 67.5151 50.0195C59.7232 57.8682 51.0388 56.8751 45.5001 53.3751L64.4176 35.0001H78.3344L90.2388 58.8045L87.2419 61.8101ZM18.1694 28.0001L27.1251 32.4713L15.9382 54.8057L7.00005 50.3388L18.1694 28.0001ZM68.9194 80.1195L43.4963 73.767L21.9713 58.3932L34.2213 33.8932L56.0001 28.1226L60.2876 29.2557L40.6001 48.3657L40.5651 48.4051C39.824 49.1462 39.2587 50.0442 38.9111 51.033C38.5634 52.0217 38.4423 53.0759 38.5565 54.1177C38.6707 55.1595 39.0174 56.1624 39.571 57.0523C40.1246 57.9423 40.871 58.6965 41.7551 59.2595C50.7501 65.0038 61.6044 64.072 70.1532 57.072L82.2501 66.7888L68.9194 80.1195ZM96.0444 54.8013L84.8794 32.4888L93.8307 28.0001L105 50.3388L96.0444 54.8013ZM57.6538 95.3445C57.4647 96.1009 57.0284 96.7726 56.4142 97.2529C55.8 97.7332 55.0429 97.9946 54.2632 97.9957C53.9756 97.9953 53.6891 97.9601 53.4101 97.8907L35.1794 93.332C34.753 93.2268 34.3506 93.0411 33.9938 92.7851L22.4657 84.5513C21.7568 83.9948 21.29 83.1863 21.1624 82.2941C21.0348 81.402 21.2562 80.495 21.7805 79.7621C22.3049 79.0291 23.0917 78.5266 23.9773 78.3593C24.8628 78.192 25.7788 78.3727 26.5344 78.8638L37.5201 86.7126L55.1251 91.1051C56.0254 91.3303 56.7994 91.9039 57.2769 92.6997C57.7544 93.4955 57.8963 94.4484 57.6713 95.3488L57.6538 95.3445Z"
-        fill="var(--teal-500)" />
-    </svg>
-
-    <h2 class="nav-card__title">Match</h2>
-    <p class="nav-card__description">
-      Answer a few questions to find a doula who matches your needs.
-    </p>
-  </a>
+  <div class="nav-cards">
+    <div class="nav-card-container">
+      <a href="/find-a-doula/search/" class="nav-card">
+        <svg
+          class="nav-card__icon"
+          viewBox="0 0 112 112"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M100.476 95.5238L78.5706 73.6225C84.9198 66 88.0858 56.2231 87.4101 46.3257C86.7343 36.4284 82.2689 27.1725 74.9426 20.4836C67.6164 13.7948 57.9935 10.1879 48.0756 10.4133C38.1578 10.6387 28.7086 14.679 21.6938 21.6938C14.679 28.7086 10.6387 38.1578 10.4133 48.0756C10.1879 57.9935 13.7948 67.6164 20.4836 74.9426C27.1725 82.2689 36.4284 86.7343 46.3257 87.4101C56.2231 88.0858 66 84.9198 73.6225 78.5706L95.5238 100.476C95.849 100.801 96.235 101.059 96.6599 101.235C97.0848 101.411 97.5401 101.502 98 101.502C98.4599 101.502 98.9153 101.411 99.3402 101.235C99.765 101.059 100.151 100.801 100.476 100.476C100.801 100.151 101.059 99.765 101.235 99.3402C101.411 98.9153 101.502 98.4599 101.502 98C101.502 97.5401 101.411 97.0848 101.235 96.6599C101.059 96.235 100.801 95.849 100.476 95.5238ZM17.5 49C17.5 42.7699 19.3475 36.6797 22.8087 31.4996C26.27 26.3194 31.1896 22.282 36.9455 19.8978C42.7014 17.5137 49.035 16.8899 55.1454 18.1053C61.2558 19.3207 66.8685 22.3208 71.2739 26.7262C75.6792 31.1315 78.6793 36.7443 79.8948 42.8547C81.1102 48.9651 80.4864 55.2987 78.1022 61.0545C75.7181 66.8104 71.6806 71.73 66.5005 75.1913C61.3203 78.6526 55.2301 80.5 49 80.5C40.6485 80.4908 32.6418 77.169 26.7364 71.2637C20.831 65.3583 17.5093 57.3515 17.5 49Z"
+            fill="var(--teal-500)" />
+        </svg>
+        <h2 class="nav-card__title">Search</h2>
+        <p class="nav-card__description">
+          Search across all Doula profiles, bios, specializations, and locations
+        </p>
+      </a>
+    </div>
+    <div class="nav-card-container">
+      <a href="/find-a-doula/browse/" class="nav-card">
+        <svg
+          class="nav-card__icon"
+          viewBox="0 0 112 112"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M66.5 34.9999C66.5 34.0716 66.8687 33.1814 67.5251 32.525C68.1815 31.8686 69.0717 31.4999 70 31.4999H108.5C109.428 31.4999 110.318 31.8686 110.975 32.525C111.631 33.1814 112 34.0716 112 34.9999C112 35.9281 111.631 36.8184 110.975 37.4747C110.318 38.1311 109.428 38.4999 108.5 38.4999H70C69.0717 38.4999 68.1815 38.1311 67.5251 37.4747C66.8687 36.8184 66.5 35.9281 66.5 34.9999ZM108.5 52.4999H70C69.0717 52.4999 68.1815 52.8686 67.5251 53.525C66.8687 54.1814 66.5 55.0716 66.5 55.9999C66.5 56.9281 66.8687 57.8184 67.5251 58.4747C68.1815 59.1311 69.0717 59.4999 70 59.4999H108.5C109.428 59.4999 110.318 59.1311 110.975 58.4747C111.631 57.8184 112 56.9281 112 55.9999C112 55.0716 111.631 54.1814 110.975 53.525C110.318 52.8686 109.428 52.4999 108.5 52.4999ZM108.5 73.4999H80.5C79.5717 73.4999 78.6815 73.8686 78.0251 74.525C77.3687 75.1814 77 76.0716 77 76.9999C77 77.9281 77.3687 78.8184 78.0251 79.4747C78.6815 80.1311 79.5717 80.4999 80.5 80.4999H108.5C109.428 80.4999 110.318 80.1311 110.975 79.4747C111.631 78.8184 112 77.9281 112 76.9999C112 76.0716 111.631 75.1814 110.975 74.525C110.318 73.8686 109.428 73.4999 108.5 73.4999ZM66.3906 83.1249C66.505 83.5701 66.5306 84.0336 66.4659 84.4887C66.4012 84.9439 66.2474 85.3818 66.0134 85.7775C65.7794 86.1732 65.4697 86.519 65.102 86.795C64.7344 87.071 64.3159 87.2718 63.8706 87.3861C63.5854 87.463 63.2911 87.5012 62.9956 87.4999C62.2194 87.5002 61.465 87.2426 60.8512 86.7674C60.2375 86.2922 59.7991 85.6264 59.605 84.8749C56.91 74.4011 46.3312 66.4999 34.9956 66.4999C23.66 66.4999 13.0812 74.3967 10.3862 84.8749C10.1542 85.7741 9.57439 86.5443 8.77443 87.0161C7.97447 87.4879 7.01986 87.6225 6.12062 87.3905C5.22137 87.1584 4.45113 86.5786 3.97936 85.7787C3.50759 84.9787 3.37293 84.0241 3.60499 83.1249C6.05062 73.6267 13.16 65.9355 22.1812 62.1249C18.7076 59.4494 16.1586 55.7537 14.8915 51.5563C13.6245 47.3588 13.7031 42.87 15.1163 38.7194C16.5294 34.5689 19.2062 30.9647 22.7714 28.4124C26.3365 25.8602 30.6111 24.4878 34.9956 24.4878C39.3802 24.4878 43.6547 25.8602 47.2199 28.4124C50.785 30.9647 53.4618 34.5689 54.875 38.7194C56.2881 42.87 56.3667 47.3588 55.0997 51.5563C53.8327 55.7537 51.2836 59.4494 47.81 62.1249C56.8356 65.9355 63.945 73.6267 66.3906 83.1249ZM35 59.4999C37.7689 59.4999 40.4757 58.6788 42.778 57.1404C45.0803 55.6021 46.8747 53.4156 47.9343 50.8574C48.9939 48.2993 49.2712 45.4843 48.731 42.7686C48.1908 40.0529 46.8574 37.5583 44.8995 35.6004C42.9416 33.6424 40.447 32.3091 37.7313 31.7689C35.0155 31.2287 32.2006 31.5059 29.6424 32.5655C27.0843 33.6252 24.8978 35.4196 23.3594 37.7219C21.8211 40.0242 21 42.7309 21 45.4999C21 49.2129 22.475 52.7738 25.1005 55.3993C27.726 58.0249 31.287 59.4999 35 59.4999Z"
+            fill="var(--teal-500)" />
+        </svg>
+        <h2 class="nav-card__title">Browse</h2>
+        <p class="nav-card__description">
+          Discover doulas across a variety of professional service categories
+        </p>
+      </a>
+    </div>
+    <div class="nav-card-container">
+      <a href="/find-a-doula/match/" class="nav-card">
+        <svg
+          class="nav-card__icon"
+          viewBox="0 0 112 112"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M111.256 47.2107L100.091 24.872C99.68 24.0497 99.1108 23.3166 98.4161 22.7144C97.7214 22.1122 96.9149 21.6528 96.0427 21.3623C95.1704 21.0718 94.2495 20.956 93.3325 21.0215C92.4155 21.0869 91.5203 21.3324 90.6982 21.7438L79.8176 27.182L56.8969 21.1182C56.3088 20.9652 55.6913 20.9652 55.1032 21.1182L32.1826 27.182L21.3019 21.7438C20.4798 21.3324 19.5846 21.0869 18.6676 21.0215C17.7506 20.956 16.8297 21.0718 15.9574 21.3623C15.0852 21.6528 14.2787 22.1122 13.584 22.7144C12.8894 23.3166 12.3201 24.0497 11.9088 24.872L0.743803 47.2063C0.33236 48.0285 0.0868977 48.9236 0.0214323 49.8406C-0.044033 50.7576 0.0717812 51.6786 0.362261 52.5508C0.652741 53.4231 1.1122 54.2296 1.71439 54.9242C2.31658 55.6189 3.04972 56.1881 3.87193 56.5995L15.6844 62.5101L39.9613 79.8482C40.319 80.1027 40.7211 80.2882 41.1469 80.3951L69.1469 87.3951C69.7333 87.5421 70.3478 87.5348 70.9305 87.3738C71.5132 87.2128 72.0442 86.9036 72.4719 86.4763L96.5651 62.3788L108.124 56.5995C109.783 55.7688 111.045 54.3132 111.631 52.5526C112.218 50.7921 112.081 48.8707 111.252 47.2107H111.256ZM87.2419 61.8101L72.1876 49.7526C71.5131 49.2125 70.6628 48.9409 69.8001 48.9902C68.9375 49.0395 68.1236 49.4061 67.5151 50.0195C59.7232 57.8682 51.0388 56.8751 45.5001 53.3751L64.4176 35.0001H78.3344L90.2388 58.8045L87.2419 61.8101ZM18.1694 28.0001L27.1251 32.4713L15.9382 54.8057L7.00005 50.3388L18.1694 28.0001ZM68.9194 80.1195L43.4963 73.767L21.9713 58.3932L34.2213 33.8932L56.0001 28.1226L60.2876 29.2557L40.6001 48.3657L40.5651 48.4051C39.824 49.1462 39.2587 50.0442 38.9111 51.033C38.5634 52.0217 38.4423 53.0759 38.5565 54.1177C38.6707 55.1595 39.0174 56.1624 39.571 57.0523C40.1246 57.9423 40.871 58.6965 41.7551 59.2595C50.7501 65.0038 61.6044 64.072 70.1532 57.072L82.2501 66.7888L68.9194 80.1195ZM96.0444 54.8013L84.8794 32.4888L93.8307 28.0001L105 50.3388L96.0444 54.8013ZM57.6538 95.3445C57.4647 96.1009 57.0284 96.7726 56.4142 97.2529C55.8 97.7332 55.0429 97.9946 54.2632 97.9957C53.9756 97.9953 53.6891 97.9601 53.4101 97.8907L35.1794 93.332C34.753 93.2268 34.3506 93.0411 33.9938 92.7851L22.4657 84.5513C21.7568 83.9948 21.29 83.1863 21.1624 82.2941C21.0348 81.402 21.2562 80.495 21.7805 79.7621C22.3049 79.0291 23.0917 78.5266 23.9773 78.3593C24.8628 78.192 25.7788 78.3727 26.5344 78.8638L37.5201 86.7126L55.1251 91.1051C56.0254 91.3303 56.7994 91.9039 57.2769 92.6997C57.7544 93.4955 57.8963 94.4484 57.6713 95.3488L57.6538 95.3445Z"
+            fill="var(--teal-500)" />
+        </svg>
+        <h2 class="nav-card__title">Match</h2>
+        <p class="nav-card__description">
+          Answer a few questions to find a doula who matches your needs.
+        </p>
+      </a>
+    </div>
+  </div>
 </section>

Original file line number	Diff line number	Diff line change
`@@ -85,6 +85,7 @@`
`85`	`85`	`}`
`86`	`86`	`}`
`87`	`87`	`.cta-cards {`
	`88`	`+ container: nav-cards / inline-size;`
`88`	`89`	`display: flex;`
`89`	`90`	`flex-direction: column;`
`90`	`91`	`gap: var(--space-m);`