Add tags to guide/

src/styles/components.scss

@@ -12,11 +12,7 @@ $news-accent-bg: #f8e8b1;
     place-content: center;
 
     font-size: 24px;
-    font-variation-settings:
-        'FILL' 0,
-        'wght' 300,
-        'GRAD' 0,
-        'opsz' 24;
+    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
 }
 
 .search {
@@ -235,3 +231,41 @@ $news-accent-bg: #f8e8b1;
         font-size: 16px;
     }
 }
+
+.article-list {
+    display: grid;
+    grid-auto-flow: column;
+
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+
+    .article {
+        display: grid;
+        grid-template-rows: auto auto auto;
+
+        background: var(--card-bg, $project-card-bg);
+        color: #000e;
+
+        @include neo-brutalist-card($size: 3px, $offset: 9px);
+
+        padding: 1rem;
+        .title {
+            font-family: 'Source Sans Pro', sans-serif;
+            font-weight: 700;
+            font-size: 32px;
+        }
+
+        .description {
+            font-size: 16px;
+        }
+
+        .tags {
+            display: flex;
+            gap: 0.5rem;
+            flex-wrap: wrap;
+            font-size: 14px;
+            padding-top: 0.5rem;
+            color: #555;
+        }
+    }
+}

src/styles/main.scss

@@ -429,7 +429,7 @@ body {
     }
 }
 
-.guide {
+.guida {
     background: #f0f0f0;
 
     &.series {
@@ -462,6 +462,36 @@ body {
     }
 }
 
+.guide {
+    main {
+        justify-self: center;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        max-width: 80ch;
+        padding: 5rem 0;
+
+        gap: 5rem;
+    }
+}
+
+.tag {
+    main {
+        justify-self: center;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        max-width: 80ch;
+        padding: 5rem 0;
+
+        gap: 5rem;
+    }
+}
+
 //
 // Misc
 //