feat: responsive design grid (#1354)

* Responsive design grid

* Addressed PR feedback

* Bump Quartz version 4.3.1 => 4.4.0

* Moved page-header into center

* Updated docs with new layouts

* Sync updated version number with package-lock

* Table of Content scrollbar auto

* Reset node_modules

* Updated layout images

* Fixed tablet layout

* Finilazed layout images

quartz/components/styles/backlinks.scss

@@ -1,19 +1,50 @@
+@use "../../styles/variables.scss" as *;
+
 .backlinks {
-  position: relative;
+  @media all and not ($desktop) {
+    overflow-y: auto;
+    display: initial;
+    &:after {
+      pointer-events: none;
+      content: "";
+      width: 100%;
+      height: 50px;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      opacity: 1;
+      transition: opacity 0.3s ease;
+      background: linear-gradient(transparent 0px, var(--light));
+    }
 
-  & > h3 {
-    font-size: 1rem;
-    margin: 0;
-  }
+    &:has(> .overflow) {
+      position: unset;
+    }
 
-  & > ul {
-    list-style: none;
-    padding: 0;
-    margin: 0.5rem 0;
+    & > h3 {
+      font-size: 1rem;
+      margin: 0;
+    }
 
-    & > li {
-      & > a {
-        background-color: transparent;
+    & > ul {
+      list-style: none;
+      padding: 0;
+      margin: 0.5rem 0;
+
+      & > li {
+        & > a {
+          background-color: transparent;
+        }
+      }
+    }
+
+    & > .overflow {
+      max-height: unset;
+      & > li:last-of-type {
+        margin-bottom: 0;
+      }
+      &:after {
+        display: none;
       }
     }
   }