updating css for medium

_code-samples/build-a-desktop-wallet/js/7-send-xrp/view/template.html

@@ -92,7 +92,7 @@
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <h1 class="modal-title fs-5" id="send-xrp-modal-label">Send XRP</h1>
+                        <h1 class="modal-title subhead-sm-r" id="send-xrp-modal-label">Send XRP</h1>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">

_code-samples/build-a-desktop-wallet/js/8-domain-verification/view/template.html

@@ -92,7 +92,7 @@
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <h1 class="modal-title fs-5" id="send-xrp-modal-label">Send XRP</h1>
+                        <h1 class="modal-title subhead-sm-r" id="send-xrp-modal-label">Send XRP</h1>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">

about/index.page.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Link } from '@redocly/theme/components/Link/Link';
-import { PageGrid, PageGridCol, PageGridRow } from "shared/components/page-grid";
+import { PageGrid, PageGridCol, PageGridRow } from "shared/components/PageGrid/page-grid";
 
 export const frontmatter = {
   seo: {

about/xrp.page.tsx

@@ -229,7 +229,7 @@ export default function XrpOverview() {
                     className="mw-100 mb-2 invertible-img"
                     src={briefcaseIcon}
                   />
-                  <h6 className="fs-4-5">
+                  <h6 className="subhead-sm-r">
                     {translate("Financial Institutions")}
                   </h6>
                   <p className="">
@@ -244,7 +244,7 @@ export default function XrpOverview() {
                     className="mw-100 mb-2 invertible-img"
                     src={userIcon}
                   />
-                  <h6 className="fs-4-5">
+                  <h6 className="subhead-sm-r">
                     {translate("Individual Consumers")}
                   </h6>
                   <p>
@@ -361,7 +361,7 @@ export default function XrpOverview() {
               </h5>
               <ul className={`nav nav-grid-lg cols-of-${totalCols}`} id="wallets">
                 <li className="nav-item nav-grid-head">
-                  <h6 className="fs-4-5">{translate("Software Wallets")}</h6>
+                  <h6 className="subhead-sm-r">{translate("Software Wallets")}</h6>
                 </li>
                 {softwallets.map((wallet) => (
                   <li key={wallet.id} className="nav-item">
@@ -381,7 +381,7 @@ export default function XrpOverview() {
                   </li>
                 ))}
                 <li className="nav-item nav-grid-head">
-                  <h6 className="fs-4-5">{translate("Hardware Wallets")}</h6>
+                  <h6 className="subhead-sm-r">{translate("Hardware Wallets")}</h6>
                 </li>
                 {hardwallets.map((wallet) => (
                   <li className="nav-item" key={wallet.id}>
@@ -423,7 +423,7 @@ export default function XrpOverview() {
               </p>
               <div className="card-grid card-grid-2xN mb-10">
                 <div>
-                  <h6 className="fs-4-5">{translate("Spot Exchanges")}</h6>
+                  <h6 className="subhead-sm-r">{translate("Spot Exchanges")}</h6>
                   <p className="mb-0">
                     {translate(
                       "Spot exchanges allow people to buy and sell cryptocurrencies at current (spot) market rates."
@@ -431,7 +431,7 @@ export default function XrpOverview() {
                   </p>
                 </div>
                 <div>
-                  <h6 className="fs-4-5">
+                  <h6 className="subhead-sm-r">
                     {translate("Futures, Options and Swap Exchanges")}
                   </h6>
                   <p className="mb-0">
@@ -441,7 +441,7 @@ export default function XrpOverview() {
                   </p>
                 </div>
                 <div>
-                  <h6 className="fs-4-5">
+                  <h6 className="subhead-sm-r">
                     {translate("Custodial Exchanges")}
                   </h6>
                   <p className="mb-0">
@@ -451,7 +451,7 @@ export default function XrpOverview() {
                   </p>
                 </div>
                 <div>
-                  <h6 className="fs-4-5">
+                  <h6 className="subhead-sm-r">
                     {translate("Non-Custodial Exchanges")}
                   </h6>
                   <p className="mb-0">

docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript.md

@@ -1106,7 +1106,7 @@ const { sendXrp } = require('./library/7_helpers')
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h1 class="modal-title fs-5" id="send-xrp-modal-label">Send XRP</h1>
+                    <h1 class="modal-title subhead-sm-r" id="send-xrp-modal-label">Send XRP</h1>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">

docs/use-cases/payments/index.page.tsx

@@ -221,7 +221,7 @@ const PaymentsPage: React.FC = () => {
             
           </div>
           <div className="text-content">
-            <h6 className="eyebrow mb-3 text-large">
+            <h6 className="eyebrow mb-3 subhead-sm-r">
               {translate("Payments")}
             </h6>
             <h2 className="h4 h2-sm mb-10">

docs/use-cases/tokenization/index.page.tsx

@@ -199,7 +199,7 @@ export default function Tokenization() {
                   "Work with a variety of tokens supported by the XRP Ledger."
                 )}
               </h2>
-              <h6 className="eyebrow mb-3 text-large">
+              <h6 className="eyebrow mb-3 subhead-sm-r">
                 {translate("Tokenization")}
               </h6>
             </div>
@@ -273,7 +273,7 @@ export default function Tokenization() {
                 target="_blank"
                 href={article.url}
               >
-                <div className="time h4 normal mb-8">
+                <div className="time h4 mb-8">
                   {translate(article.time)}
                 </div>
                 <div className="h5 mb-4">{translate(article.title)}</div>

index.page.tsx

@@ -1,7 +1,7 @@
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { BenefitsSection } from 'shared/components/benefits-section';
-import { PageGrid, PageGridCol, PageGridRow } from 'shared/components/page-grid';
+import { PageGrid, PageGridCol, PageGridRow } from 'shared/components/PageGrid/page-grid';
 
 export const frontmatter = {
   seo: {

package.json

@@ -8,7 +8,7 @@
     "analyze-css": "node scripts/analyze-css.js",
     "build-css": "sass --load-path styles/scss styles/xrpl.scss ./static/css/devportal2024-v1.tmp.css && NODE_ENV=production postcss ./static/css/devportal2024-v1.tmp.css -o ./static/css/devportal2024-v1.css && rm -f ./static/css/devportal2024-v1.tmp.css",
     "build-css:dev": "sass --load-path styles/scss styles/xrpl.scss ./static/css/devportal2024-v1.tmp.css --source-map && postcss ./static/css/devportal2024-v1.tmp.css -o ./static/css/devportal2024-v1.css && rm -f ./static/css/devportal2024-v1.tmp.css",
-    "build-css:watch": "sass --watch --load-path styles/scss styles/xrpl.scss ./static/css/devportal2024-v1.css --source-map",
+    "build-css:watch": "sass --watch --load-path styles/scss --silence-deprecation=import --silence-deprecation=global-builtin --silence-deprecation=color-functions styles/xrpl.scss ./static/css/devportal2024-v1.css --source-map",
     "start": "realm develop"
   },
   "keywords": [],

shared/components/PageGrid/page-grid.md

@@ -0,0 +1,277 @@
+# PageGrid Component
+
+A responsive grid system component for creating flexible layouts with support for multiple breakpoints.
+
+## Overview
+
+The PageGrid component provides a flexible grid layout system with three main components:
+- `PageGrid` - The container component
+- `PageGrid.Row` - Row component for grouping columns
+- `PageGrid.Col` - Column component with responsive sizing and offset support
+
+## Breakpoints
+
+The grid system supports the following breakpoints:
+- `base` - Default/mobile (applies to all sizes)
+- `sm` - Small screens
+- `md` - Medium screens
+- `lg` - Large screens
+- `xl` - Extra large screens
+
+## Basic Usage
+
+```tsx
+import { PageGrid } from '@/shared/components/PageGrid/page-grid';
+
+function MyComponent() {
+  return (
+    <PageGrid>
+      <PageGrid.Row>
+        <PageGrid.Col span={6}>
+          Column 1
+        </PageGrid.Col>
+        <PageGrid.Col span={6}>
+          Column 2
+        </PageGrid.Col>
+      </PageGrid.Row>
+    </PageGrid>
+  );
+}
+```
+
+## PageGrid Props
+
+The root `PageGrid` component accepts all standard HTML div attributes:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `className` | `string` | Additional CSS classes to apply |
+| `...rest` | `HTMLDivElement attributes` | Any other HTML div attributes |
+
+## PageGrid.Row Props
+
+The `PageGrid.Row` component accepts all standard HTML div attributes:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `className` | `string` | Additional CSS classes to apply |
+| `...rest` | `HTMLDivElement attributes` | Any other HTML div attributes |
+
+## PageGrid.Col Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `span` | `number \| "auto" \| "fill" \| ResponsiveValue` | Column span width |
+| `offset` | `number \| ResponsiveValue` | Column offset (left margin) |
+| `className` | `string` | Additional CSS classes to apply |
+| `...rest` | `HTMLDivElement attributes` | Any other HTML div attributes |
+
+### Span Values
+
+- **Number** (e.g., `1-12`): Fixed column width
+- **"auto"**: Column takes up only the space it needs
+- **"fill"**: Column fills remaining available space
+- **Responsive Object**: Different spans for different breakpoints
+
+### Offset Values
+
+- **Number** (e.g., `1-12`): Number of columns to offset
+- **Responsive Object**: Different offsets for different breakpoints
+
+## Examples
+
+### Fixed Column Widths
+
+```tsx
+<PageGrid>
+  <PageGrid.Row>
+    <PageGrid.Col span={4}>Sidebar</PageGrid.Col>
+    <PageGrid.Col span={8}>Main Content</PageGrid.Col>
+  </PageGrid.Row>
+</PageGrid>
+```
+
+### Auto and Fill
+
+```tsx
+<PageGrid>
+  <PageGrid.Row>
+    <PageGrid.Col span="auto">Minimal Width</PageGrid.Col>
+    <PageGrid.Col span="fill">Takes Remaining Space</PageGrid.Col>
+    <PageGrid.Col span="auto">Another Auto</PageGrid.Col>
+  </PageGrid.Row>
+</PageGrid>
+```
+
+### Responsive Layout
+
+Create layouts that adapt to different screen sizes:
+
+```tsx
+<PageGrid>
+  <PageGrid.Row>
+    <PageGrid.Col 
+      span={{
+        base: 12,    // Full width on mobile
+        sm: 12,      // Full width on small screens
+        md: 6,       // Half width on medium screens
+        lg: 4,       // Third width on large screens
+        xl: 3        // Quarter width on extra large screens
+      }}
+    >
+      Responsive Column
+    </PageGrid.Col>
+  </PageGrid.Row>
+</PageGrid>
+```
+
+### Using Offsets
+
+Center content or create spacing with offsets:
+
+```tsx
+<PageGrid>
+  <PageGrid.Row>
+    {/* Center an 8-column element */}
+    <PageGrid.Col span={8} offset={2}>
+      Centered Content
+    </PageGrid.Col>
+  </PageGrid.Row>
+</PageGrid>
+```
+
+### Responsive Offsets
+
+```tsx
+<PageGrid>
+  <PageGrid.Row>
+    <PageGrid.Col 
+      span={6}
+      offset={{
+        base: 0,     // No offset on mobile
+        md: 3        // Offset by 3 columns on medium+ screens
+      }}
+    >
+      Content
+    </PageGrid.Col>
+  </PageGrid.Row>
+</PageGrid>
+```
+
+### Complex Responsive Layout
+
+```tsx
+<PageGrid>
+  <PageGrid.Row>
+    {/* Hero section */}
+    <PageGrid.Col span={12}>
+      <h1>Page Title</h1>
+    </PageGrid.Col>
+  </PageGrid.Row>
+  
+  <PageGrid.Row>
+    {/* Sidebar - full width on mobile, 1/3 on desktop */}
+    <PageGrid.Col 
+      span={{
+        base: 12,
+        lg: 4
+      }}
+    >
+      <aside>Sidebar</aside>
+    </PageGrid.Col>
+    
+    {/* Main content - full width on mobile, 2/3 on desktop */}
+    <PageGrid.Col 
+      span={{
+        base: 12,
+        lg: 8
+      }}
+    >
+      <main>Main Content</main>
+    </PageGrid.Col>
+  </PageGrid.Row>
+</PageGrid>
+```
+
+### Multiple Columns with Equal Width
+
+```tsx
+<PageGrid>
+  <PageGrid.Row>
+    <PageGrid.Col span={3}>Column 1</PageGrid.Col>
+    <PageGrid.Col span={3}>Column 2</PageGrid.Col>
+    <PageGrid.Col span={3}>Column 3</PageGrid.Col>
+    <PageGrid.Col span={3}>Column 4</PageGrid.Col>
+  </PageGrid.Row>
+</PageGrid>
+```
+
+### Nested Grids
+
+```tsx
+<PageGrid>
+  <PageGrid.Row>
+    <PageGrid.Col span={12}>
+      <PageGrid>
+        <PageGrid.Row>
+          <PageGrid.Col span={6}>Nested Column 1</PageGrid.Col>
+          <PageGrid.Col span={6}>Nested Column 2</PageGrid.Col>
+        </PageGrid.Row>
+      </PageGrid>
+    </PageGrid.Col>
+  </PageGrid.Row>
+</PageGrid>
+```
+
+## CSS Classes Generated
+
+The component generates the following CSS classes:
+
+### Container
+- `xrpl-grid__container`
+
+### Row
+- `xrpl-grid__row`
+
+### Column Spans
+- `xrpl-grid__col-{number}` (e.g., `xrpl-grid__col-6`)
+- `xrpl-grid__col-auto`
+- `xrpl-grid__col` (for fill)
+- `xrpl-grid__col-{breakpoint}-{number}` (e.g., `xrpl-grid__col-md-6`)
+- `xrpl-grid__col-{breakpoint}-auto`
+- `xrpl-grid__col-{breakpoint}` (for fill)
+
+### Column Offsets
+- `xrpl-grid__offset-{number}` (e.g., `xrpl-grid__offset-2`)
+- `xrpl-grid__offset-{breakpoint}-{number}` (e.g., `xrpl-grid__offset-md-2`)
+
+## TypeScript Types
+
+```typescript
+type PageGridBreakpoint = "base" | "sm" | "md" | "lg" | "xl";
+type ResponsiveValue<T> = T | Partial<Record<PageGridBreakpoint, T>>;
+type PageGridSpanValue = number | "auto" | "fill";
+type PageGridOffsetValue = number;
+
+interface PageGridColProps {
+  span?: ResponsiveValue<PageGridSpanValue>;
+  offset?: ResponsiveValue<PageGridOffsetValue>;
+  className?: string;
+  // ... plus all HTMLDivElement attributes
+}
+```
+
+## Best Practices
+
+1. **Use semantic HTML**: Wrap content in appropriate semantic elements within columns
+2. **Mobile-first**: Start with base/mobile layout and progressively enhance for larger screens
+3. **Keep it simple**: Avoid overly complex nested grid structures when possible
+4. **Test responsiveness**: Verify layouts work well at all breakpoint transitions
+5. **Accessibility**: Ensure grid layouts maintain logical reading order for screen readers
+
+## Notes
+
+- The total columns in the grid system is typically 12 (though this depends on your CSS implementation)
+- Responsive values cascade - if you don't specify a value for a breakpoint, it inherits from the previous breakpoint
+- All components forward refs, allowing you to attach refs to the underlying DOM elements
+

shared/components/PageGrid/page-grid.tsx

@@ -2,7 +2,11 @@ import React from "react";
 import clsx from "clsx";
 
 type PageGridElementProps = React.HTMLAttributes<HTMLDivElement>;
+
+// Define the standard PageGrid breakpoints
 type PageGridBreakpoint = "base" | "sm" | "md" | "lg" | "xl";
+
+// Define the ResponsiveValue type using Partial<Record> for breakpoints
 type ResponsiveValue<T> = T | Partial<Record<PageGridBreakpoint, T>>;
 
 export interface PageGridProps extends PageGridElementProps {}
@@ -17,24 +21,50 @@ export interface PageGridColProps extends PageGridElementProps {
   offset?: ResponsiveValue<PageGridOffsetValue>;
 }
 
+// Keys used for iteration and generating responsive class prefixes
 const breakpointKeys: Array<Exclude<PageGridBreakpoint, "base">> = ["sm", "md", "lg", "xl"];
 
-const classForSpan = (prefix: string | null, value: PageGridSpanValue) => {
+/**
+ * Helper function to construct the column span CSS class string.
+ * This function relies on the corresponding classes being pre-generated in SCSS.
+ * @param prefix The breakpoint prefix (e.g., 'md' or null for base).
+ * @param value The span value (number, "auto", or "fill").
+ * @returns The full CSS class string.
+ */
+const classForSpan = (prefix: string | null, value: PageGridSpanValue): string => {
+  const prefixStr = prefix ? `-${prefix}` : "";
+
   if (value === "auto") {
-    return prefix ? `xrpl-grid__col-${prefix}-auto` : "xrpl-grid__col-auto";
+    // Generates xrpl-grid__col-auto or xrpl-grid__col-md-auto
+    return `xrpl-grid__col${prefixStr}-auto`;
   }
 
   if (value === "fill") {
-    return prefix ? `xrpl-grid__col-${prefix}` : "xrpl-grid__col";
+    // Generates xrpl-grid__col or xrpl-grid__col-md (based on documentation)
+    // Note: The documentation states 'xrpl-grid__col' for fill, and 'xrpl-grid__col-{breakpoint}' for fill
+    // The implementation below aligns with the documentation's example logic:
+    return prefix ? `xrpl-grid__col${prefixStr}` : "xrpl-grid__col";
   }
 
-  return prefix ? `xrpl-grid__col-${prefix}-${value}` : `xrpl-grid__col-${value}`;
+  // Generates xrpl-grid__col-6 or xrpl-grid__col-md-6
+  return `xrpl-grid__col${prefixStr}-${value}`;
 };
 
-const classForOffset = (prefix: string | null, value: PageGridOffsetValue) => {
-  return prefix ? `xrpl-grid__offset-${prefix}-${value}` : `xrpl-grid__offset-${value}`;
+/**
+ * Helper function to construct the column offset CSS class string.
+ * This function relies on the corresponding classes being pre-generated in SCSS.
+ * @param prefix The breakpoint prefix (e.g., 'md' or null for base).
+ * @param value The offset value (number).
+ * @returns The full CSS class string.
+ */
+const classForOffset = (prefix: string | null, value: PageGridOffsetValue): string => {
+  const prefixStr = prefix ? `-${prefix}` : "";
+  // Generates xrpl-grid__offset-2 or xrpl-grid__offset-md-2
+  return `xrpl-grid__offset${prefixStr}-${value}`;
 };
 
+
+// --- PageGrid Root Component ---
 const PageGridRoot = React.forwardRef<HTMLDivElement, PageGridProps>(
   ({ className, ...rest }, ref) => (
     <div ref={ref} className={clsx("xrpl-grid__container", className)} {...rest} />
@@ -43,59 +73,74 @@ const PageGridRoot = React.forwardRef<HTMLDivElement, PageGridProps>(
 
 PageGridRoot.displayName = "PageGrid";
 
+
+// --- PageGrid.Row Component ---
 const PageGridRow = React.forwardRef<HTMLDivElement, PageGridRowProps>(
   ({ className, ...rest }, ref) => (
     <div ref={ref} className={clsx("xrpl-grid__row", className)} {...rest} />
   )
 );
 
-PageGridRoot.displayName = "PageGrid";
+PageGridRow.displayName = "PageGridRow"; // Renamed display name for clarity
 
+// --- PageGrid.Col Component ---
 const PageGridCol = React.forwardRef<HTMLDivElement, PageGridColProps>((props, ref) => {
   const { className, span, offset, ...rest } = props;
   const spanClasses: string[] = [];
   const offsetClasses: string[] = [];
 
+  // --- Span Logic ---
   if (typeof span === "number" || typeof span === "string") {
+    // Handles fixed/base span={6} or span="auto"
     spanClasses.push(classForSpan(null, span as PageGridSpanValue));
   } else if (span && typeof span === "object") {
+    // Handles base breakpoint (no prefix)
     const baseSpan = "base" in span ? span.base : undefined;
 
     if (baseSpan) {
       spanClasses.push(classForSpan(null, baseSpan));
     }
 
+    // Handles sm, md, lg, xl breakpoints (with prefix)
     breakpointKeys.forEach((key) => {
       const value = span[key];
 
       if (value) {
+        // Generates classes like xrpl-grid__col-md-6
         spanClasses.push(classForSpan(key, value));
       }
     });
   }
 
+  // --- Offset Logic ---
   if (typeof offset === "number") {
+    // Handles fixed offset={2}
     offsetClasses.push(classForOffset(null, offset));
   } else if (offset && typeof offset === "object") {
+    // Handles base offset (no prefix)
     const baseOffset = "base" in offset ? offset.base : undefined;
 
     if (baseOffset !== undefined) {
       offsetClasses.push(classForOffset(null, baseOffset));
     }
 
+    // Handles sm, md, lg, xl offsets (with prefix)
     breakpointKeys.forEach((key) => {
       const value = offset[key];
 
       if (value !== undefined) {
+        // Generates classes like xrpl-grid__offset-md-3
         offsetClasses.push(classForOffset(key, value));
       }
     });
   }
 
+  // Ensure the base class is always applied for styling
   return (
     <div
       ref={ref}
-      className={clsx("xrpl-grid__col", className, spanClasses, offsetClasses)}
+      // Note: Added "xrpl-grid__col" base class for consistent column initialization
+      className={clsx("xrpl-grid__col", className, spanClasses, offsetClasses)} 
       {...rest}
     />
   );
@@ -103,6 +148,8 @@ const PageGridCol = React.forwardRef<HTMLDivElement, PageGridColProps>((props, r
 
 PageGridCol.displayName = "PageGridCol";
 
+
+// --- Component Composition ---
 type PageGridComponent = typeof PageGridRoot & {
   Row: typeof PageGridRow;
   Col: typeof PageGridCol;

shared/components/benefits-section.tsx

@@ -42,7 +42,7 @@ export const BenefitsSection: React.FC<BenefitsSectionProps> = ({
         {cards.map(card => (
           <li className="col ls-none" key={card.id}>
             {showImages && <img id={card.id} alt={card.title + ' Icon'} />}
-            <h4 className="sh-md-l">{translate(card.title)}</h4>
+            <h4 className="sh-md-r">{translate(card.title)}</h4>
             <p className="body-l mt-3">
               {typeof card.description === 'string' ? translate(card.description) : card.description}
             </p>

static/css/devportal2024-v1.css

@@ -9250,60 +9250,6 @@ p {
   line-height: 24px;
 }
 
-.fs-base {
-  font-size: 1rem;
-}
-
-.fs-3 {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-.fs-4-5 {
-  font-size: 1.125rem;
-}
-
-.fs-5 {
-  font-size: 1.25rem;
-}
-
-.fs-5-5 {
-  font-size: 1.375rem;
-}
-
-.fs-6 {
-  font-size: 1.5rem;
-}
-
-.normal {
-  font-weight: normal;
-}
-
-.bold {
-  font-weight: bold;
-}
-
-.text-largest {
-  font-size: 1.5rem;
-  font-weight: normal;
-}
-
-.text-large {
-  font-size: 1.125rem;
-}
-
-.text-small {
-  font-size: 0.875rem;
-}
-
-.text-smaller {
-  font-size: 0.75rem;
-}
-
-.text-smallest {
-  font-size: 0.625rem;
-}
-
 /* STYLIZED LINKS */
 .arrow-link {
   text-decoration: none;
@@ -11267,74 +11213,6 @@ article table td:nth-child(1) {
   }
 }
 
-/* TABLE STYLING */
-article table {
-  clear: right;
-  margin-bottom: 48px;
-}
-article table code {
-  word-break: normal;
-  white-space: nowrap;
-  overflow-wrap: normal;
-}
-article table th {
-  border-bottom: 2px solid #E0E0E1;
-}
-article table tr {
-  border-bottom: 1px solid #E0E0E1;
-}
-article table th, article table td {
-  padding: 0.2em;
-  vertical-align: text-top;
-}
-article table td:nth-child(1) {
-  font-weight: bold;
-}
-
-.landing-table th, .landing-table tr {
-  border-bottom: 2px solid #454549;
-}
-.landing-table td {
-  width: 33.33%;
-  padding: 16px 40px 16px 0;
-}
-.landing-table td:nth-child(1) {
-  font-weight: normal;
-}
-@media (max-width: 575.98px) {
-  .landing-table td {
-    font-size: 0.875rem;
-  }
-}
-.landing-table tr:last-child {
-  border-bottom: none;
-}
-.landing-table tbody td {
-  color: #E0E0E1;
-}
-
-.dblue {
-  color: #454549;
-}
-
-#overview-table td:nth-child(1) {
-  width: 40%;
-}
-#overview-table td:nth-child(2) {
-  width: 30%;
-}
-#overview-table tbody td {
-  padding: 2rem 0.75rem;
-}
-@media (max-width: 575.98px) {
-  #overview-table {
-    font-size: 0.875rem;
-  }
-  #overview-table thead .h4 {
-    font-size: 1.125rem;
-  }
-}
-
 /* Use Cases ---------------------------------------------------------------- */
 .modal-uses.exchanges .logo-item {
   max-height: 58px;
@@ -15381,12 +15259,6 @@ main article .card-grid.card-grid-3xN:nth-of-type(3) .card:nth-child(9) .card-fo
 .landing article .curated-links li a:hover {
   text-decoration: underline;
 }
-.landing section:first-of-type h1:first-child, .landing section:first-of-type .h1:first-child {
-  font-family: "Tobias", "Noto Serif", monospace;
-  font-weight: 400;
-  margin-top: 0;
-  line-height: 1.2;
-}
 .landing .level-1,
 .landing .level-2 {
   margin-top: 0;

styles/_font.scss

@@ -13,11 +13,6 @@ pre, code {
   font-variant-ligatures: none;
 }
 
-// h1, h2, h3, h4, h5, h6,
-// .h1, .h2, .h3, .h4, .h5, .h6 {
-//   font-weight: bold;
-// }
-
 .h1, .h2, .h3, .h4, .h5, .h6 {
   font-family: $font-family-monospace;
   font-weight: 400;
@@ -108,49 +103,6 @@ p {
   line-height: 24px;
 }
 
-.fs-base {
-  font-size: $base-size;
-}
-.fs-3 {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-.fs-4-5 {
-  font-size: 1.125rem;
-}
-.fs-5 {
-  font-size: 1.25rem;
-}
-.fs-5-5 {
-  font-size: 1.375rem;
-}
-.fs-6 {
-  font-size: 1.5rem;
-}
-.normal {
-  font-weight: normal;
-}
-.bold {
-  font-weight: bold;
-}
-
-.text-largest {
-  font-size: 1.5rem;
-  font-weight: normal;
-}
-.text-large {
-  font-size: 1.125rem;
-}
-.text-small {
-  font-size: 0.875rem;
-}
-.text-smaller {
-  font-size: 0.75rem;
-}
-.text-smallest {
-  font-size: 0.625rem;
-}
-
 /* STYLIZED LINKS */
 .arrow-link {
   text-decoration: none;

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.scss

@@ -49,6 +49,7 @@ $grid-breakpoints: (
 );
 
 // 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.