make guide section more mobile friendly on portrait

sass/_default.scss

@@ -178,13 +178,6 @@ body {
   color: $DEFAULT_FONT_COLOR;
 }
 
-$body_portrait_margin: $BIG_PADDING $ZERO_PADDING !default;
-@media (orientation: portrait) {
-  body {
-    margin: $body_portrait_margin;
-  }
-}
-
 $link_color: #c11c1c !default;
 $link_color_visited: #730c0c !default;
 :where(a:link){
@@ -1536,3 +1529,26 @@ $rss_button_font_color_active: black !default;
     color: $rss_button_font_color_active;
   }
 }
+
+@media (orientation: portrait) {
+  $body_portrait_margin: $BIG_PADDING $ZERO_PADDING !default;
+  body {
+    margin: $body_portrait_margin;
+  }
+
+  .guide-container {
+    grid-template-areas:
+    "guide-toc"
+    "guide-topics";
+    grid-template-columns: unset;
+  }
+
+  .guide-toc {
+    position: unset;
+  }
+
+  $guide_section_padding_right_portrait: $BIG_PADDING !default;
+  .guide-section {
+    padding-right: $guide_section_padding_right_portrait;
+  }
+}