improve touchscreen scrolling on carousel and make mobile page wider

src/app/app.css

@@ -151,14 +151,14 @@
 
 @media (max-width: 768px) {
   .content {
-    padding-top: calc(6.5rem + env(safe-area-inset-top));
+    padding: calc(6.5rem + env(safe-area-inset-top)) 0.5rem 3rem;
   }
 
   .sidebar {
     position: fixed;
     top: 0.75rem;
-    right: 0.75rem;
-    left: 0.75rem;
+    right: 0.5rem;
+    left: 0.5rem;
     transform: none;
     width: auto;
     margin: 0;

src/components/tech-stack-carousel/tech-stack-carousel.css

@@ -209,7 +209,7 @@ h2 {
 @media (max-width: 760px) {
   .stack-carousel-shell {
     --carousel-nav-space: 0;
-    --carousel-edge-fade-size: 1rem;
+    --carousel-edge-fade-size: 0.6rem;
     width: 100%;
     margin-inline: 0;
   }

src/pages/home/home.css

@@ -161,7 +161,7 @@ h2 {
 
 @media (max-width: 760px) {
   .page-wrap {
-    padding-top: 0.5rem;
+    padding: 0.5rem 0.75rem 3.5rem;
   }
 
   .hero {

src/styles.css

@@ -82,7 +82,7 @@ a {
 
 @media (max-width: 760px) {
   .page-shell {
-    padding-top: 0.5rem;
+    padding: 0.5rem 0.75rem 3.5rem;
   }
 
   .hero-panel {