feat: appunti and guide prototype page styling

src/styles/components.scss

@@ -8,7 +8,7 @@ $news-accent-bg: #f8e8b1;
 //
 
 .material-symbols-outlined {
-    display: grid;
+    display: inline-grid;
     place-content: center;
 
     font-size: 24px;
@@ -26,6 +26,8 @@ $news-accent-bg: #f8e8b1;
     align-items: center;
 
     cursor: pointer;
+    
+    background: #fff;
 
     &:hover,
     &:hover input[type='text'] {
@@ -94,16 +96,23 @@ $news-accent-bg: #f8e8b1;
 
         @include neo-brutalist-card;
 
+        a {
+            display: contents;
+        }
+
         & > .icon {
             grid-area: icon;
+            display: grid;
         }
 
         & > .text {
             grid-area: text;
+            display: grid;
         }
 
         & > .right {
             grid-area: right;
+            display: grid;
         }
     }
 }
@@ -171,4 +180,54 @@ $news-accent-bg: #f8e8b1;
         align-items: end;
         justify-content: end;
     }
-}
+}
+
+.appunti-scrollable {
+    display: flex;
+    overflow-x: auto;
+
+    .appunti-list {
+        padding: 2px;
+        padding-bottom: 1rem;
+    }
+}
+
+.appunti-list {
+    display: grid;
+    grid-auto-flow: column;
+
+    gap: 3rem;
+
+    overflow-x: auto;
+
+    max-width: 100%;
+}
+
+.appunti-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+
+    color: #444;
+
+    & > .thumbnail {
+        width: 10rem;
+        aspect-ratio: 10 / 14;
+        background: #e0e0e0;
+
+        @include neo-brutalist-card($hoverable: true);
+    }
+
+    & > .thumbnail + * {
+        font-weight: 700;
+        padding-top: 0.25rem;
+    }
+
+    & > .title,
+    & > .course,
+    & > .author,
+    & > .course-year {
+        padding-left: 0.5rem;
+        font-size: 16px;
+    }
+}