    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="mt-12 rounded shadow-xl shadow-mauve/40 overflow-hidden shadow divide-y divide-crust contrast-more:divide-mantle sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px">
        {%- for navItem in links -%}
          <div class="relative group bg-base/75 contrast-more:bg-crust p-6">
            <h3 class="text-lg">
              <a href="{{navItem.url}}" class="link">
                <!-- Extend touch target to entire panel -->
                <span class="absolute inset-0" aria-hidden="true"></span>
                {{navItem.title}}
              </a>
            </h3>
            <p class="mt-2 text-sm text-text">
              {{navItem.description}}
            </p>
          </div>
        {%- endfor -%}
      </div>
    </div>

    <footer class="mt-12 bg-base/75 contrast-more:bg-crust py-4 px-4 text-subtext1 text-center">
      Built in <a class="link" href="https://www.11ty.dev/">Eleventy</a> with <a class="link" href="https://tailwindcss.com/">TailwindCSS</a>, a 🐈 <a class="link" href="https://github.com/catppuccin">Catppuccin color palette</a>, <a href="https://ko-fi.com/lynte" class="link" id="lynte">character pixel art by Lynte</a>, and you may <a class="link" href="https://git.gay/gaiety/portfolio">🍴 Fork it Here</a>
    </footer>
  </body>
</html>

