docs(layout): ensure content sits in main (#31610)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

1 files changed, 24 insertions, 10 deletions

diff --git a/site/assets/scss/_layout.scss b/site/assets/scss/_layout.scss
index 4d43276a09..707c4949d1 100644
--- a/site/assets/scss/_layout.scss
+++ b/site/assets/scss/_layout.scss
@@ -2,20 +2,12 @@
   @include media-breakpoint-up(md) {
     display: grid;
     gap: $grid-gutter-width;
-    grid-template-areas:
-      "sidebar intro"
-      "sidebar toc"
-      "sidebar content";
+    grid-template-areas: "sidebar main";
     grid-template-columns: 1fr 3fr;
-    grid-template-rows: auto auto 1fr;
   }
 
   @include media-breakpoint-up(lg) {
-    grid-template-areas:
-      "sidebar intro toc"
-      "sidebar content toc";
-    grid-template-columns: 1fr 4fr 1fr;
-    grid-template-rows: auto 1fr;
+    grid-template-columns: 1fr 5fr;
   }
 }
 
@@ -23,6 +15,28 @@
   grid-area: sidebar;
 }
 
+.bd-main {
+  grid-area: main;
+
+  @include media-breakpoint-up(md) {
+    display: grid;
+    gap: inherit;
+    grid-template-areas:
+      "intro"
+      "toc"
+      "content";
+    grid-template-rows: auto auto 1fr;
+  }
+
+  @include media-breakpoint-up(lg) {
+    grid-template-areas:
+      "intro   toc"
+      "content toc";
+    grid-template-columns: 4fr 1fr;
+    grid-template-rows: auto 1fr;
+  }
+}
+
 .bd-intro {
   grid-area: intro;
 }