Simplified styles for ordered and unordered lists.

src/assets/scss/base/_list.scss

@@ -5,40 +5,39 @@
 @use "breakpoint" as *;
 @use "space" as *;
 
-:where(main) ul:not([class]) {
-  padding: 0 0 0 $space-24;
-  list-style-type: none;
+ul:not([class]),
+ol:not([class]) {
+  margin-left: $space-16;
+
+  ul,
+  ol {
+    padding: $space-8 $space-16 0;
+  }
 
   li {
-    position: relative;
     margin-bottom: $space-8;
-
-    @include breakpoint(medium) {
-      margin-bottom: $space-12;
-    }
-
-    &::before {
-      position: relative;
-      z-index: 2;
-      float: left;
-      clear: both;
-      margin: 9px 10px 0 -19px;
-      width: 8px;
-      height: 8px;
-      border-radius: 60px;
-      background: var(--action-color);
-      content: "";
-    }
   }
+}
 
-  ul {
-    padding: $space-16 0 0 $space-16;
+ul:not([class]) {
+  > li::marker {
+    display: block;
+    color: var(--primary-800);
   }
 }
 
-:where(main) ol:not([class]) {
+ol.incremented {
   counter-reset: item;
 
+  ol{
+    counter-reset: item;
+  }
+
+  ol,
+  ul {
+    margin: $space-12 0 0 $space-16;
+  }
+
   li {
     display: block;
     margin-bottom: $space-8;
@@ -52,16 +51,15 @@
       counter-increment: item;
     }
 
+    &:last-child {
+      margin-bottom: 0;
+    }
+
     p {
       display: inline;
     }
   }
 
-  ol,
-  ul {
-    margin: $space-12 0 0 $space-16;
-  }
-
   ul {
     li::before {
       content: "";

src/assets/scss/base/_reset.scss

@@ -41,7 +41,7 @@ ul {
   padding: 0;
 }
 
-ul {
+ul:where([class]) {
   list-style: none;
 }
 

src/components/Navigation.astro

@@ -251,6 +251,7 @@ import { DarkMode } from 'accessible-astro-components'
       > ul {
         display: flex;
         gap: 1.5rem;
+        list-style-type: none;
 
         .is-active {
           font-weight: bold;