feat: migrate to native details element for quickfacts component

src/views/AnatomyView.vue

@@ -157,8 +157,8 @@ const showModal = inject<Function>(showModalKey, Function);
   <section>
     <ColorTable :colors="sebinColors" />
 
-    <QuickFacts>
-      <ul class="col-2">
+    <QuickFacts :cols="2">
+      <ul>
         <li>Bipedal plantigrade</li>
         <li>Red and yellow scales</li>
         <li>Yellow scales under chin, torso, underside of tail</li>
@@ -190,8 +190,8 @@ const showModal = inject<Function>(showModalKey, Function);
   <section>
     <h2>Wings</h2>
 
-    <QuickFacts>
-      <ul class="col-2">
+    <QuickFacts :cols="2">
+      <ul>
         <li>
           Wingspan {{ wingspan / 100 }} meters ({{ toImperial(wingspan) }})
         </li>
@@ -277,8 +277,8 @@ const showModal = inject<Function>(showModalKey, Function);
   </RefFigure>
 
   <section>
-    <QuickFacts>
-      <ul class="col-2">
+    <QuickFacts :cols="2">
+      <ul>
         <li>Round pupils, green iris</li>
         <li>Yellow spikes for eyebrows</li>
         <li>Yellow spikes on cheeks</li>
@@ -311,8 +311,8 @@ const showModal = inject<Function>(showModalKey, Function);
   <section>
     <h2>Upper Body</h2>
 
-    <QuickFacts>
-      <ul class="col-2">
+    <QuickFacts :cols="2">
+      <ul>
         <li>Strong upper body</li>
         <li>Big pecs</li>
         <li>Defined abs</li>
@@ -823,8 +823,8 @@ const showModal = inject<Function>(showModalKey, Function);
     <section>
       <DataTable :headings="sebinPenisHeadings" :data="sebinPenisData" />
 
-      <QuickFacts>
-        <ul class="col-2">
+      <QuickFacts :cols="2">
+        <ul>
           <li>Human-shaped with ridges</li>
           <li>Ring-like sheath surrounding shaft</li>
           <li>