prototype mostly finished

src/styles/components.scss

@@ -14,7 +14,7 @@
         width: 22px;
         height: 22px;
 
-        display: grid;
+        display: grid inline;
         place-content: center;
     }
 
@@ -79,29 +79,6 @@
         }
     }
 
-    .flex-column {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-    }
-
-    .flex-row {
-        display: flex;
-        flex-direction: row;
-        gap: 1rem;
-    }
-
-    // just to know for reference
-    .fake-masonry {
-        display: grid;
-        grid-template-columns: repeat(var(--columns), 1fr);
-        grid-auto-flow: dense;
-
-        & > * {
-            grid-row: span var(--masonry-height);
-        }
-    }
-
     .search-results {
         width: 100%;
 
@@ -597,17 +574,6 @@
             grid-auto-flow: column;
             justify-content: start;
             gap: 0.5rem;
-
-            .chip {
-                background: #0003;
-                font-size: 13px;
-
-                padding: 0 0.25rem;
-                border-radius: 0.25rem;
-                line-height: 1.5;
-
-                font-weight: 600;
-            }
         }
 
         @media screen and (max-width: $screen-desktop-min) {
@@ -627,6 +593,33 @@
         }
     }
 
+    .chip {
+        user-select: none;
+
+        display: grid;
+        place-content: center;
+        place-items: center;
+
+        background: #0003;
+
+        padding: 0 0.25rem;
+        border-radius: 0.25rem;
+        line-height: 1.5;
+
+        font-size: 16px;
+        font-weight: 500;
+
+        &.small {
+            font-size: 13px;
+            font-weight: 600;
+        }
+
+        &.disabled {
+            color: #0005;
+            background: #0002;
+        }
+    }
+
     a:has(> .card) {
         display: contents;
     }
@@ -908,6 +901,10 @@
 
         justify-content: center;
 
+        .text > * {
+            max-width: none;
+        }
+
         @media screen and (max-width: $screen-desktop-min) {
             grid-template-columns: 1fr;
 
@@ -915,4 +912,68 @@
             gap: 1rem;
         }
     }
+
+    .filter {
+        min-width: 15rem;
+    }
+
+    .flex-column {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .flex-row {
+        display: flex;
+        flex-direction: row;
+        gap: 0.5rem;
+    }
+
+    .flex-row-wrap {
+        display: flex;
+        flex-direction: row;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+    }
+
+    .grid-h {
+        display: grid;
+        grid-auto-flow: column;
+        justify-content: start;
+        align-items: center;
+
+        gap: 0.5rem;
+    }
+
+    .grid-v {
+        display: grid;
+        justify-items: start;
+        align-content: start;
+
+        grid-auto-flow: row;
+        gap: 0.5rem;
+    }
+
+    .grid-center {
+        display: grid;
+        place-content: center;
+        place-items: center;
+        gap: 0.5rem;
+        grid-auto-flow: row;
+    }
+
+    .clickable {
+        cursor: pointer;
+    }
+
+    // just to know for reference
+    .fake-masonry {
+        display: grid;
+        grid-template-columns: repeat(var(--columns), 1fr);
+        grid-auto-flow: dense;
+
+        & > * {
+            grid-row: span var(--masonry-height);
+        }
+    }
 }

src/styles/controls.scss

@@ -129,4 +129,47 @@
             justify-self: center;
         }
     }
+
+    details {
+        width: 100%;
+
+        summary {
+            display: grid;
+            place-content: center;
+            place-items: center;
+
+            list-style: none;
+            &::-webkit-details-marker {
+                display: none;
+            }
+        }
+
+        .details-openned,
+        .details-closed {
+            display: contents;
+        }
+
+        &:not([open]) {
+            .details-openned {
+                display: none;
+            }
+        }
+
+        &[open] {
+            summary {
+                padding-bottom: 1rem;
+            }
+
+            .details-closed {
+                display: none;
+            }
+        }
+
+        @media screen and (max-width: $screen-desktop-min) {
+            summary {
+                place-content: stretch;
+                place-items: stretch;
+            }
+        }
+    }
 }

src/styles/main.scss

@@ -208,6 +208,10 @@ body {
         @media screen and (max-width: $screen-desktop-min) {
             padding: 3rem 1rem;
             gap: 3rem;
+
+            .card {
+                width: 100%;
+            }
         }
     }
 

src/styles/typography.scss

@@ -33,6 +33,18 @@
 @layer typography {
     @include geometric-headings;
 
+    strong {
+        font-weight: 600;
+    }
+
+    em {
+        font-style: italic;
+    }
+
+    .text-center {
+        text-align: center;
+    }
+
     .text {
         // text-align: justify;
         // hyphens: auto;