{{ if .Params.questions }}
<ul class="flex flex-col gap-2 mx-auto mb-16">
  {{ range .Params.questions }}
  <li>
    <details class="group">
      <summary
        class="border-1 rounded-lg border-white flex items-center justify-between gap-2 pb-4 font-medium marker:content-none hover:cursor-pointer"
      >
        <span class="flex gap-2">
          <span class="text-md font-bold">{{ .question }}</span>
        </span>
        <svg
          class="min-w-5 min-h-5 text-gray-500 transition group-open:rotate-90"
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          fill="currentColor"
          viewBox="0 0 16 16"
        >
          <path
            fill-rule="evenodd"
            d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
          ></path>
        </svg>
      </summary>

      <article class="px-4 pb-4">
        <ul class="flex flex-col gap-1 pl-2">
          <li class="flex flex-col gap-2 text-sm">
            {{ .answer }} {{ if .learnMore }}
            <a
              class="font-bold underline"
              href="{{ .learnMore }}"
              target="_blank"
              >Learn More</a
            >{{ end }}
          </li>
        </ul>
      </article>
    </details>
  </li>

  {{ end }}
</ul>
{{ end }}