refactor: ♻️ use more appropriate elements for semantics

src/components/colors.webc

@@ -1,12 +1,12 @@
-<div class="character-colors">
+<ul class="character-colors">
-  <div class="color" webc:for="color of colors">
+  <li class="color" webc:for="color of colors">
     <div class="color-box" @attributes="({ style: `background-color: ${color.value}`})"></div>
     <div class="content">
       <p class="heading" @text="color.name"></p>
       <p class="text" @text="color.value"></p>
     </div>
-  </div>
+  </li>
-</div>
+</ul>
 
 <style>
   .character-colors {
@@ -17,6 +17,7 @@
     gap: 1em;
 
     margin-block: 2em;
+    padding: 0;
 
     & .color {
       display: grid;

src/components/timeline.webc

@@ -1,10 +1,10 @@
-<div class="timeline">
+<ul class="timeline">
-  <div class="job" webc:for="job of jobs">
+  <li class="job" webc:for="job of jobs">
     <icon class="icon" :icon="job.icon"></icon>
     <p class="title" @text="job.title"></p>
     <p class="text" @text="job.desc"></p>
-  </div>
+  </li>
-</div>
+</ul>
 
 <style>
   .timeline {
@@ -13,6 +13,9 @@
     --timeline-stroke-color: var(--clr-timeline-stroke);
     --timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
 
+    margin-block: 1em;
+    padding: 0;
+
     @media (min-width: 32em) {
       --timeline-circle-size: 4rem;
     }

src/components/traits.webc

@@ -1,10 +1,10 @@
-<div class="trait-list">
+<ul class="trait-list">
-  <div class="trait" webc:for="trait of traits">
+  <li class="trait" webc:for="trait of traits">
     <div class="icon-box"><icon :icon="trait.icon" webc:nokeep></icon></div>
     <p class="type" @text="trait.type"></p>
     <p class="text" @text="trait.text"></p>
-  </div>
+  </li>
-</div>
+</ul>
 
 <style>
   .trait-list {
@@ -12,8 +12,8 @@
     grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
     gap: 0.75em;
 
-    margin-block: 0;
+    margin: 0;
-    margin-inline: 0;
+    padding: 0;
   }
 
   .trait {