enhance grid layout and functionality for articles; improve spacing and sigil generation

assets/scss/components/_wompum.scss

@@ -4,24 +4,57 @@
         margin: 0 auto;
     }
 
-    &-grid {
+    &-grid,
+    &-article-grid {
         display: grid;
         gap: 0;
         padding: 0;
         width: 100%;
     }
 
-    .single-default &-grid,
-    .single-article &-grid {
-        gap: 1rem;
+    // General grid styles
+    &-grid {
+        gap: 2px; // Tighter spacing for general grids
+        
+        &[data-rows="1"] {
+            .wompum-cell {
+                height: 100%;
+            }
+        }
+    }
+
+    // Article grid styles
+    &-article-grid {
+        gap: 3px; // Wider spacing for article grids
+
+        .single-default &,
+        .single-article & {
+            gap: 1rem;
+        }
     }
 
     &-cell {
         width: 100%;
-        min-height: 30px;
+        transition: background-color 0.3s ease;
+
+        // Default background for uninitialized cells
         background-color: var(--sand-500);
 
-        // Create pseudo-random pattern using prime numbers
+        // Different styling for cells in article grids
+        .wompum-article-grid & {
+            &[data-section="narrator"] {
+                min-height: 35px;
+            }
+            &[data-section="subject"] {
+                min-height: 40px;
+            }
+            &[data-section="facilitator"] {
+                min-height: 35px;
+            }
+        }
+
+        // Fallback patterns using prime numbers
+        // (these will be overridden by JS-generated colors when initialized)
         &:nth-child(7n+1) {
             background-color: var(--sand-100);
         }