A few more layout fixes.

- Improve primary layout to deal with edge cases better.

- Make FAQ landing page use a masonry layout.

src/sass/misc/_faq-landing.scss

@@ -1,15 +1,17 @@
 .faq-landing {
-    display: grid;
-    grid-template-columns: [card] 1fr;
-    grid-gap: 2rem;
+    column-count: 1;
+    column-gap: 2rem;
 
     @media (min-width: $bp-sm) {
-        grid-template-columns: [card] 1fr [card] 1fr;
+        column-count: 2
     }
 
     .panel {
+        display: inline-block;
         border: 1px solid $boxBorderColor;
         border-radius: 4px;
+        width: 100%;
+        margin-bottom: 2rem;
 
         .header {
             color: $textBrandColor;

src/sass/misc/_primary.scss

@@ -23,7 +23,7 @@
     padding-right: .5rem;
 
     @media screen AND (min-width: $bp-md) {
-        grid-template-columns: [sidebar] 20% [article] calc(80% - 1rem);
+        grid-template-columns: [sidebar] 16% [article] calc(84% - 1rem);
         padding-left: 1rem;
         padding-right: 1rem;
     }
@@ -34,6 +34,18 @@
         .toc-container {
             display: block;
         }
+
+        .toc {
+            .directory {
+                max-width: min(25em, 16%);
+            }
+        }
+
+        .sidebar {
+            .directory {
+                max-width: min(25em, 16%);
+            }
+        }
     }
 
     &.notoc {

src/sass/misc/_sidebar.scss

@@ -40,10 +40,6 @@
             max-height: calc(100vh - 9rem);
         }
 
-        @media (min-width: $bp-xl) {
-            max-width: 25em;
-        }
-
         @media (min-width: $bp-md) {
             @supports ((position:-webkit-sticky) or (position:sticky)) {
                 max-height: calc(100vh - 9rem);

src/sass/misc/_toc.scss

@@ -16,10 +16,6 @@
             max-height: calc(100vh - 9rem);
         }
 
-        @media (min-width: $bp-xl) {
-            max-width: 25em;
-        }
-
         @media (min-width: $bp-md) {
             @supports ((position:-webkit-sticky) or (position:sticky)) {
                 max-height: calc(100vh - 9rem);