fix: some wrong widths

src/styles/components.scss

@@ -586,6 +586,18 @@
                 text-decoration: underline solid 3px;
             }
         }
+
+        @media screen and (max-width: $screen-desktop-min) {
+            padding: 0.8rem;
+
+            &.large {
+                padding: 1.25rem;
+
+                & > .title {
+                    font-size: 32px;
+                }
+            }
+        }
     }
 
     //

src/styles/main.scss

@@ -44,10 +44,10 @@ $screen-desktop-min: 1024px;
         color: #222;
     }
 
-    html {
+    // html {
-        scroll-snap-type: y mandatory;
+    //     scroll-snap-type: y mandatory;
-        scroll-padding-top: 4rem;
+    //     scroll-padding-top: 4rem;
-    }
+    // }
 
     img {
         display: block;
@@ -221,6 +221,8 @@ body {
         font-family: 'Source Sans Pro', sans-serif;
         font-size: 20px;
 
+        scroll-snap-align: end;
+
         @media screen and (max-width: $screen-desktop-min) {
             min-height: 5rem;
             font-size: 18px;

src/styles/pages.scss

@@ -176,7 +176,7 @@
 
             .project-list {
                 width: calc(20rem * 3 + 1.5rem * 2 + 6rem * 2);
-                max-width: 100vw;
+                max-width: calc(100vw - 2rem); // HACK: capire come si propagano le width per bene
 
                 display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
@@ -211,6 +211,10 @@
 
                     .title {
                         font-size: 32px;
+
+                        @media screen and (max-width: $screen-desktop-min) {
+                            font-size: 24px;
+                        }
                     }
 
                     .image {
@@ -261,6 +265,10 @@
                     padding: 0 1rem;
 
                     grid-template-columns: 1fr;
+
+                    .project {
+                        padding: 0.8rem;
+                    }
                 }
             }
         }