<div class="mx-auto ">
    <!-- notice here, the key rule is `[&_svg]:open:-rotate-180` -->
    <details class="border-b  border-slate-300 rounded-t-md p-4 [&_svg]:open:-rotate-180">
      <!-- notice here, we have disabled the summary's default triangle/arrow -->
      <summary class="flex cursor-pointer list-none items-center gap-4">
        <div>
          <!-- notice here, we added our own triangle/arrow svg -->
          <svg class="rotate-0 transform text-slate-700 transition-all duration-300" fill="none" height="20" width="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24">
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </div>
        <%= title%>
      </summary>
  
      <p class="mt-5 ml-9 text-slate-700">
        <%= description%>
        </p>
    </details>
</div>