move page grid css to page grid folder, removing more text class styling

styles/_landings.scss

@@ -23,13 +23,6 @@
     }
   }
 
-  section:first-of-type h1:first-child {
-    font-family: $font-family-monospace;
-    font-weight: 400;
-    margin-top: 0;
-    line-height: 1.2;
-  }
-
   .level-1,
   .level-2{
     margin-top: 0;

styles/_xrpl-grid.scss

@@ -1,116 +0,0 @@
-// XRPL Grid
-// -----------------------------------------------------------------------------
-// A namespaced grid layer that reuses Bootstrap's grid mixins while providing
-// XRPL-specific gutters and container padding.
-
-$xrpl-grid-gutter: 8px;
-
-@mixin xrpl-grid-generate-cols($columns, $suffix: null) {
-  @for $i from 1 through $columns {
-    $selector: if($suffix, ".xrpl-grid__col-#{$suffix}-#{$i}", ".xrpl-grid__col-#{$i}");
-
-    #{$selector} {
-      @include make-col($i, $columns);
-    }
-  }
-}
-
-@mixin xrpl-grid-generate-auto($suffix: null) {
-  $selector: if($suffix, ".xrpl-grid__col-#{$suffix}-auto", ".xrpl-grid__col-auto");
-
-  #{$selector} {
-    @include make-col-auto();
-  }
-}
-
-@mixin xrpl-grid-generate-fill($suffix: null) {
-  $selector: if($suffix, ".xrpl-grid__col-#{$suffix}", ".xrpl-grid__col");
-
-  #{$selector} {
-    flex: 1 0 0;
-  }
-}
-
-@mixin xrpl-grid-generate-offsets($columns, $suffix: null) {
-  @for $i from 0 through ($columns - 1) {
-    $selector: if($suffix, ".xrpl-grid__offset-#{$suffix}-#{$i}", ".xrpl-grid__offset-#{$i}");
-
-    #{$selector} {
-      @include make-col-offset($i, $columns);
-    }
-  }
-}
-
-.xrpl-grid {
-  &__container {
-    width: 100%;
-    margin-right: auto;
-    margin-left: auto;
-    padding-right: 16px;
-    padding-left: 16px;
-    box-sizing: border-box;
-
-    @include media-breakpoint-up(sm) {
-      padding-right: 24px;
-      padding-left: 24px;
-    }
-
-    @include media-breakpoint-up(lg) {
-      padding-right: 32px;
-      padding-left: 32px;
-    }
-
-    @media (min-width: 1280px) {
-      padding-right: 112px;
-      padding-left: 112px;
-      max-width: 1440px;
-    }
-  }
-
-  &__row {
-    @include make-row($xrpl-grid-gutter);
-  }
-
-  &__col {
-    @include make-col-ready();
-  }
-}
-
-// Base (0 - 575px) — 4-column grid
-@include xrpl-grid-generate-fill();
-@include xrpl-grid-generate-cols(4);
-@include xrpl-grid-generate-auto();
-@include xrpl-grid-generate-offsets(4);
-
-// Tablet (≥576px) — maintain 8-column grid across sm/md ranges
-@include media-breakpoint-up(sm) {
-  @include xrpl-grid-generate-fill('sm');
-  @include xrpl-grid-generate-cols(8, 'sm');
-  @include xrpl-grid-generate-auto('sm');
-  @include xrpl-grid-generate-offsets(8, 'sm');
-}
-
-@include media-breakpoint-up(md) {
-  @include xrpl-grid-generate-fill('md');
-  @include xrpl-grid-generate-cols(8, 'md');
-  @include xrpl-grid-generate-auto('md');
-  @include xrpl-grid-generate-offsets(8, 'md');
-}
-
-// Large (≥992px) — 12-column grid
-@include media-breakpoint-up(lg) {
-  @include xrpl-grid-generate-fill('lg');
-  @include xrpl-grid-generate-cols(12, 'lg');
-  @include xrpl-grid-generate-auto('lg');
-  @include xrpl-grid-generate-offsets(12, 'lg');
-}
-
-// XL (≥1280px) — retain 12-column grid with wider margins
-@include media-breakpoint-up(xl) {
-  @include xrpl-grid-generate-fill('xl');
-  @include xrpl-grid-generate-cols(12, 'xl');
-  @include xrpl-grid-generate-auto('xl');
-  @include xrpl-grid-generate-offsets(12, 'xl');
-}
-
-

styles/xrpl.scss

@@ -43,12 +43,13 @@ $line-height-base: 1.5;
 $grid-breakpoints: (
   xs: 0,
   sm: 576px,
-  md: 576px,
+  md: 768px,
   lg: 992px,
   xl: 1280px
 );
 
 // Bootstrap v5 - Import only what we need
+// Note: Bootstrap still uses @import internally, so we use @import for Bootstrap
 @import "../node_modules/bootstrap/scss/functions";
 @import "../node_modules/bootstrap/scss/variables";
 @import "../node_modules/bootstrap/scss/variables-dark";
@@ -86,13 +87,12 @@ $grid-breakpoints: (
 @import "_helpers.scss";
 @import "_buttons.scss";
 @import "_tables.scss";
-@import "_tables.scss";
 @import "_use-cases.scss";
 @import "_github-edit.scss";
 @import "_top-nav.scss";
 @import "_top-banner.scss";
 @import "_content.scss";
-@import "_xrpl-grid.scss";
+@import "../shared/components/PageGrid/page-grid";
 @import "_code-tabs.scss";
 @import "_code-walkthrough.scss";
 @import "_diagrams.scss";
@@ -114,6 +114,7 @@ $grid-breakpoints: (
 @import "_contribute.scss";
 @import "_docs-landing.scss";
 @import "_osano.scss";
+
 // Light/Dark theme settings ---------------------------------------------------
 // Option to only change theme on user system settings.  No toggle.