Improve list style

gulpfile.js

@@ -41,6 +41,7 @@ const postcssPurgecss = require("@fullhuman/postcss-purgecss")({
     /grid-cols-\d\d?/, // grid columns
     /col-span-\d\d?/, // grid spans
     /row-span-\d\d?/, // grid spans
+    /grid-flow/, // grid flow
     /(sm|md|lg|xl)(\\:)text-.*/,
     // /text-*/,
     /ico--*/, // icons

source/_patterns/00-atoms/lists/dense-unordered-list.mustache

+<ul class="unordered-list unordered-list--dense">
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+  <li>{{ headline.short }}</li>
+</ul>

source/_patterns/00-atoms/lists/unordered-list-leading-variants.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list leading-tight">
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+    </ul>
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list leading-snug">
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+    </ul>
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list leading-normal">
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+    </ul>
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list leading-relaxed">
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+    </ul>
+  </div>
+</div>

source/_patterns/00-atoms/lists/unordered-list-sizes.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list text-xs">
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+    </ul>
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list text-sm">
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+    </ul>
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list text-lg">
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+    </ul>
+  </div>
+  <div class="inline-flex flex-col space-y-2">
+    <ul class="unordered-list text-xl">
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+      <li>{{ excerpt.short }}</li>
+    </ul>
+  </div>
+</div>

source/css/atoms/list.pcss

@@ -5,37 +5,59 @@
 
 .unordered-list,
 .content-block ul {
+  @apply grid gap-4;
+
   li {
-    @apply relative flex items-center;
+    @apply grid items-start;
+
+    grid-gap: .5em;
+    grid-template-columns: auto 1fr;
 
     &:before {
-      @apply text-black pr-2;
+      @apply text-black;
 
       font-family: "pirati-ui";
       content: "\e919";
-      font-size: 7px;
+      font-size: .5em;
       font-weight: 600;
+      margin-top: .5em;
     }
   }
 
-  &.text-sm li:before {
-    font-size: 5px;
+  &.leading-tight li:before {
+    margin-top: .8em;
+  }
+
+  &.leading-snug li:before {
+    margin-top: .6em;
+  }
+
+  &.leading-normal li:before {
+    margin-top: .7em;
+  }
+
+  &.leading-relaxed li:before {
+    margin-top: .6em;
   }
 }
 
+.unordered-list--dense {
+  @apply row-gap-2;
+}
+
 .unordered-list--linked {
+  li {
+    grid-template-columns: auto 1fr auto;
+  }
+
   li:after {
-    @apply text-black pl-2 ml-auto;
+    @apply text-black;
 
     font-family: "pirati-ui";
     content: "\e923";
-    font-size: 10px;
+    font-size: 1em;
     font-weight: 300;
   }
-
-  &.text-sm li:after {
-    font-size: 8px;
-  }
 }
 
 .ordered-list,