diff --git a/shared/components/PageGrid/_page-grid.scss b/shared/components/PageGrid/_page-grid.scss
index 83fadac6bf..f0f441f6b6 100644
--- a/shared/components/PageGrid/_page-grid.scss
+++ b/shared/components/PageGrid/_page-grid.scss
@@ -3,10 +3,10 @@
 // A namespaced grid layer that reuses Bootstrap's grid mixins while providing
 // XRPL-specific gutters and container padding.
 
-$xrpl-grid-gutter: 8px;
+$bds-grid-gutter: 8px;
 
 // Custom mixin that accounts for gap spacing in width calculations
-@mixin xrpl-make-col($size, $columns) {
+@mixin bds-make-col($size, $columns) {
   flex: 0 0 auto;
   // Calculate width accounting for gap spacing
   // Formula: width per column * span + gap spacing between spanned columns
@@ -14,29 +14,29 @@ $xrpl-grid-gutter: 8px;
   // Total available width: 100% - (gap * total gaps)
   // Width per column: available width / columns
   // For span of $size: (width per column * size) + (gap * (size - 1))
-  width: calc(((100% - (#{$xrpl-grid-gutter} * (#{$columns} - 1))) / #{$columns}) * #{$size} + (#{$xrpl-grid-gutter} * (#{$size} - 1)));
+  width: calc(((100% - (#{$bds-grid-gutter} * (#{$columns} - 1))) / #{$columns}) * #{$size} + (#{$bds-grid-gutter} * (#{$size} - 1)));
 }
 
-@mixin xrpl-grid-generate-cols($columns, $suffix: null) {
+@mixin bds-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: if($suffix, ".bds-grid__col-#{$suffix}-#{$i}", ".bds-grid__col-#{$i}");
 
     #{$selector} {
-      @include xrpl-make-col($i, $columns);
+      @include bds-make-col($i, $columns);
     }
   }
 }
 
-@mixin xrpl-grid-generate-auto($suffix: null) {
-  $selector: if($suffix, ".xrpl-grid__col-#{$suffix}-auto", ".xrpl-grid__col-auto");
+@mixin bds-grid-generate-auto($suffix: null) {
+  $selector: if($suffix, ".bds-grid__col-#{$suffix}-auto", ".bds-grid__col-auto");
 
   #{$selector} {
     @include make-col-auto();
   }
 }
 
-@mixin xrpl-grid-generate-fill($suffix: null) {
-  $selector: if($suffix, ".xrpl-grid__col-#{$suffix}-fill", ".xrpl-grid__col-fill");
+@mixin bds-grid-generate-fill($suffix: null) {
+  $selector: if($suffix, ".bds-grid__col-#{$suffix}-fill", ".bds-grid__col-fill");
 
   #{$selector} {
     flex: 1 0 0;
@@ -44,9 +44,9 @@ $xrpl-grid-gutter: 8px;
   }
 }
 
-@mixin xrpl-grid-generate-offsets($columns, $suffix: null) {
+@mixin bds-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: if($suffix, ".bds-grid__offset-#{$suffix}-#{$i}", ".bds-grid__offset-#{$i}");
 
     #{$selector} {
       @include make-col-offset($i, $columns);
@@ -55,43 +55,43 @@ $xrpl-grid-gutter: 8px;
 }
 
 // Mixin to generate responsive base column classes (1-12) with built-in breakpoint behavior
-@mixin xrpl-grid-generate-responsive-base-cols() {
+@mixin bds-grid-generate-responsive-base-cols() {
   @for $i from 1 through 12 {
-    .xrpl-grid__col-#{$i} {
+    .bds-grid__col-#{$i} {
       // Base breakpoint (4 columns): if span > 4, clamp to 4 (which gives 4/4 = 100%)
       @if $i > 4 {
-        @include xrpl-make-col(4, 4);
+        @include bds-make-col(4, 4);
       } @else {
-        @include xrpl-make-col($i, 4);
+        @include bds-make-col($i, 4);
       }
 
       // SM breakpoint (8 columns): if span > 8, clamp to 8 (which gives 8/8 = 100%)
       @include media-breakpoint-up(sm) {
         @if $i > 8 {
-          @include xrpl-make-col(8, 8);
+          @include bds-make-col(8, 8);
         } @else {
-          @include xrpl-make-col($i, 8);
+          @include bds-make-col($i, 8);
         }
       }
 
       // MD breakpoint (8 columns): if span > 8, clamp to 8 (which gives 8/8 = 100%)
       @include media-breakpoint-up(md) {
         @if $i > 8 {
-          @include xrpl-make-col(8, 8);
+          @include bds-make-col(8, 8);
         } @else {
-          @include xrpl-make-col($i, 8);
+          @include bds-make-col($i, 8);
         }
       }
 
       // LG+ breakpoints (12 columns): always calculate based on 12 cols
       @include media-breakpoint-up(lg) {
-        @include xrpl-make-col($i, 12);
+        @include bds-make-col($i, 12);
       }
     }
   }
 }
 
-.xrpl-grid {
+.bds-grid {
   &__container {
     width: 100%;
     margin-right: auto;
@@ -121,7 +121,7 @@ $xrpl-grid-gutter: 8px;
     display: flex;
     flex-wrap: wrap;
     // Use gap for spacing - works with our calc-based column widths
-    gap: $xrpl-grid-gutter;
+    gap: $bds-grid-gutter;
   }
 
   &__col {
@@ -137,38 +137,38 @@ $xrpl-grid-gutter: 8px;
 }
 
 // Base (0 - 575px) — 4-column grid with responsive behavior built-in
-@include xrpl-grid-generate-fill();
-@include xrpl-grid-generate-responsive-base-cols();
-@include xrpl-grid-generate-auto();
-@include xrpl-grid-generate-offsets(4);
+@include bds-grid-generate-fill();
+@include bds-grid-generate-responsive-base-cols();
+@include bds-grid-generate-auto();
+@include bds-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 bds-grid-generate-fill('sm');
+  @include bds-grid-generate-cols(8, 'sm');
+  @include bds-grid-generate-auto('sm');
+  @include bds-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');
+  @include bds-grid-generate-fill('md');
+  @include bds-grid-generate-cols(8, 'md');
+  @include bds-grid-generate-auto('md');
+  @include bds-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');
+  @include bds-grid-generate-fill('lg');
+  @include bds-grid-generate-cols(12, 'lg');
+  @include bds-grid-generate-auto('lg');
+  @include bds-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');
+  @include bds-grid-generate-fill('xl');
+  @include bds-grid-generate-cols(12, 'xl');
+  @include bds-grid-generate-auto('xl');
+  @include bds-grid-generate-offsets(12, 'xl');
 }
\ No newline at end of file
diff --git a/shared/components/PageGrid/page-grid.md b/shared/components/PageGrid/page-grid.md
index 0f45fbf23d..c40ae0f903 100644
--- a/shared/components/PageGrid/page-grid.md
+++ b/shared/components/PageGrid/page-grid.md
@@ -228,22 +228,22 @@ Center content or create spacing with offsets:
 The component generates the following CSS classes:
 
 ### Container
-- `xrpl-grid__container`
+- `bds-grid__container`
 
 ### Row
-- `xrpl-grid__row`
+- `bds-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)
+- `bds-grid__col-{number}` (e.g., `bds-grid__col-6`)
+- `bds-grid__col-auto`
+- `bds-grid__col` (for fill)
+- `bds-grid__col-{breakpoint}-{number}` (e.g., `bds-grid__col-md-6`)
+- `bds-grid__col-{breakpoint}-auto`
+- `bds-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`)
+- `bds-grid__offset-{number}` (e.g., `bds-grid__offset-2`)
+- `bds-grid__offset-{breakpoint}-{number}` (e.g., `bds-grid__offset-md-2`)
 
 ## TypeScript Types
 
diff --git a/shared/components/PageGrid/page-grid.tsx b/shared/components/PageGrid/page-grid.tsx
index 90154aa97f..f1cd268840 100644
--- a/shared/components/PageGrid/page-grid.tsx
+++ b/shared/components/PageGrid/page-grid.tsx
@@ -35,18 +35,18 @@ const classForSpan = (prefix: string | null, value: PageGridSpanValue): string =
   const prefixStr = prefix ? `-${prefix}` : "";
 
   if (value === "auto") {
-    // Generates xrpl-grid__col-auto or xrpl-grid__col-md-auto
-    return `xrpl-grid__col${prefixStr}-auto`;
+    // Generates bds-grid__col-auto or bds-grid__col-md-auto
+    return `bds-grid__col${prefixStr}-auto`;
   }
 
   if (value === "fill") {
-    // Generates xrpl-grid__col-fill or xrpl-grid__col-md-fill
+    // Generates bds-grid__col-fill or bds-grid__col-md-fill
     // This allows us to distinguish between "no span" and "span='fill'" in CSS
-    return `xrpl-grid__col${prefixStr}-fill`;
+    return `bds-grid__col${prefixStr}-fill`;
   }
 
-  // Generates xrpl-grid__col-6 or xrpl-grid__col-md-6
-  return `xrpl-grid__col${prefixStr}-${value}`;
+  // Generates bds-grid__col-6 or bds-grid__col-md-6
+  return `bds-grid__col${prefixStr}-${value}`;
 };
 
 /**
@@ -58,15 +58,15 @@ const classForSpan = (prefix: string | null, value: PageGridSpanValue): 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}`;
+  // Generates bds-grid__offset-2 or bds-grid__offset-md-2
+  return `bds-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} />
+    <div ref={ref} className={clsx("bds-grid__container", className)} {...rest} />
   )
 );
 
@@ -76,7 +76,7 @@ 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} />
+    <div ref={ref} className={clsx("bds-grid__row", className)} {...rest} />
   )
 );
 
@@ -109,7 +109,7 @@ const PageGridCol = React.forwardRef<HTMLDivElement, PageGridColProps>((props, r
       const value = span[key];
 
       if (value) {
-        // Generates classes like xrpl-grid__col-md-6
+        // Generates classes like bds-grid__col-md-6
         spanClasses.push(classForSpan(key, value));
       }
     });
@@ -132,7 +132,7 @@ const PageGridCol = React.forwardRef<HTMLDivElement, PageGridColProps>((props, r
       const value = offset[key];
 
       if (value !== undefined) {
-        // Generates classes like xrpl-grid__offset-md-3
+        // Generates classes like bds-grid__offset-md-3
         offsetClasses.push(classForOffset(key, value));
       }
     });
@@ -142,8 +142,8 @@ const PageGridCol = React.forwardRef<HTMLDivElement, PageGridColProps>((props, r
   return (
     <div
       ref={ref}
-      // Note: Added "xrpl-grid__col" base class for consistent column initialization
-      className={clsx("xrpl-grid__col", className, spanClasses, offsetClasses)} 
+      // Note: Added "bds-grid__col" base class for consistent column initialization
+      className={clsx("bds-grid__col", className, spanClasses, offsetClasses)} 
       {...rest}
     />
   );
diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css
index 4b134cbb65..ed2fbd6038 100644
--- a/static/css/devportal2024-v1.css
+++ b/static/css/devportal2024-v1.css
@@ -13681,7 +13681,7 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
   text-decoration: none;
 }
 
-.xrpl-grid__container {
+.bds-grid__container {
   width: 100%;
   margin-right: auto;
   margin-left: auto;
@@ -13690,30 +13690,30 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
   box-sizing: border-box;
 }
 @media (min-width: 576px) {
-  .xrpl-grid__container {
+  .bds-grid__container {
     padding-right: 24px;
     padding-left: 24px;
   }
 }
 @media (min-width: 992px) {
-  .xrpl-grid__container {
+  .bds-grid__container {
     padding-right: 32px;
     padding-left: 32px;
   }
 }
 @media (min-width: 1280px) {
-  .xrpl-grid__container {
+  .bds-grid__container {
     padding-right: 112px;
     padding-left: 112px;
     max-width: 1440px;
   }
 }
-.xrpl-grid__row {
+.bds-grid__row {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }
-.xrpl-grid__col {
+.bds-grid__col {
   box-sizing: border-box;
   flex: auto;
   flex-shrink: 0;
@@ -13721,625 +13721,625 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
   max-width: 100%;
 }
 
-.xrpl-grid__col-fill {
+.bds-grid__col-fill {
   flex: 1 0 0;
   width: auto;
 }
 
-.xrpl-grid__col-1 {
+.bds-grid__col-1 {
   flex: 0 0 auto;
   width: calc((100% - 8px * (4 - 1)) / 4 * 1 + 8px * (1 - 1));
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-1 {
+  .bds-grid__col-1 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1));
   }
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-1 {
+  .bds-grid__col-1 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1));
   }
 }
 @media (min-width: 992px) {
-  .xrpl-grid__col-1 {
+  .bds-grid__col-1 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1));
   }
 }
 
-.xrpl-grid__col-2 {
+.bds-grid__col-2 {
   flex: 0 0 auto;
   width: calc((100% - 8px * (4 - 1)) / 4 * 2 + 8px * (2 - 1));
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-2 {
+  .bds-grid__col-2 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1));
   }
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-2 {
+  .bds-grid__col-2 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1));
   }
 }
 @media (min-width: 992px) {
-  .xrpl-grid__col-2 {
+  .bds-grid__col-2 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1));
   }
 }
 
-.xrpl-grid__col-3 {
+.bds-grid__col-3 {
   flex: 0 0 auto;
   width: calc((100% - 8px * (4 - 1)) / 4 * 3 + 8px * (3 - 1));
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-3 {
+  .bds-grid__col-3 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1));
   }
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-3 {
+  .bds-grid__col-3 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1));
   }
 }
 @media (min-width: 992px) {
-  .xrpl-grid__col-3 {
+  .bds-grid__col-3 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1));
   }
 }
 
-.xrpl-grid__col-4 {
+.bds-grid__col-4 {
   flex: 0 0 auto;
   width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-4 {
+  .bds-grid__col-4 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1));
   }
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-4 {
+  .bds-grid__col-4 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1));
   }
 }
 @media (min-width: 992px) {
-  .xrpl-grid__col-4 {
+  .bds-grid__col-4 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1));
   }
 }
 
-.xrpl-grid__col-5 {
+.bds-grid__col-5 {
   flex: 0 0 auto;
   width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-5 {
+  .bds-grid__col-5 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1));
   }
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-5 {
+  .bds-grid__col-5 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1));
   }
 }
 @media (min-width: 992px) {
-  .xrpl-grid__col-5 {
+  .bds-grid__col-5 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1));
   }
 }
 
-.xrpl-grid__col-6 {
+.bds-grid__col-6 {
   flex: 0 0 auto;
   width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-6 {
+  .bds-grid__col-6 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1));
   }
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-6 {
+  .bds-grid__col-6 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1));
   }
 }
 @media (min-width: 992px) {
-  .xrpl-grid__col-6 {
+  .bds-grid__col-6 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1));
   }
 }
 
-.xrpl-grid__col-7 {
+.bds-grid__col-7 {
   flex: 0 0 auto;
   width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-7 {
+  .bds-grid__col-7 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1));
   }
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-7 {
+  .bds-grid__col-7 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1));
   }
 }
 @media (min-width: 992px) {
-  .xrpl-grid__col-7 {
+  .bds-grid__col-7 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1));
   }
 }
 
-.xrpl-grid__col-8 {
+.bds-grid__col-8 {
   flex: 0 0 auto;
   width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-8 {
+  .bds-grid__col-8 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
   }
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-8 {
+  .bds-grid__col-8 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
   }
 }
 @media (min-width: 992px) {
-  .xrpl-grid__col-8 {
+  .bds-grid__col-8 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1));
   }
 }
 
-.xrpl-grid__col-9 {
+.bds-grid__col-9 {
   flex: 0 0 auto;
   width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-9 {
+  .bds-grid__col-9 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
   }
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-9 {
+  .bds-grid__col-9 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
   }
 }
 @media (min-width: 992px) {
-  .xrpl-grid__col-9 {
+  .bds-grid__col-9 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1));
   }
 }
 
-.xrpl-grid__col-10 {
+.bds-grid__col-10 {
   flex: 0 0 auto;
   width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-10 {
+  .bds-grid__col-10 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
   }
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-10 {
+  .bds-grid__col-10 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
   }
 }
 @media (min-width: 992px) {
-  .xrpl-grid__col-10 {
+  .bds-grid__col-10 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1));
   }
 }
 
-.xrpl-grid__col-11 {
+.bds-grid__col-11 {
   flex: 0 0 auto;
   width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-11 {
+  .bds-grid__col-11 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
   }
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-11 {
+  .bds-grid__col-11 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
   }
 }
 @media (min-width: 992px) {
-  .xrpl-grid__col-11 {
+  .bds-grid__col-11 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1));
   }
 }
 
-.xrpl-grid__col-12 {
+.bds-grid__col-12 {
   flex: 0 0 auto;
   width: calc((100% - 8px * (4 - 1)) / 4 * 4 + 8px * (4 - 1));
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-12 {
+  .bds-grid__col-12 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
   }
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-12 {
+  .bds-grid__col-12 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
   }
 }
 @media (min-width: 992px) {
-  .xrpl-grid__col-12 {
+  .bds-grid__col-12 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1));
   }
 }
 
-.xrpl-grid__col-auto {
+.bds-grid__col-auto {
   flex: 0 0 auto;
   width: auto;
 }
 
-.xrpl-grid__offset-0 {
+.bds-grid__offset-0 {
   margin-left: 0;
 }
 
-.xrpl-grid__offset-1 {
+.bds-grid__offset-1 {
   margin-left: 25%;
 }
 
-.xrpl-grid__offset-2 {
+.bds-grid__offset-2 {
   margin-left: 50%;
 }
 
-.xrpl-grid__offset-3 {
+.bds-grid__offset-3 {
   margin-left: 75%;
 }
 
 @media (min-width: 576px) {
-  .xrpl-grid__col-sm-fill {
+  .bds-grid__col-sm-fill {
     flex: 1 0 0;
     width: auto;
   }
-  .xrpl-grid__col-sm-1 {
+  .bds-grid__col-sm-1 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1));
   }
-  .xrpl-grid__col-sm-2 {
+  .bds-grid__col-sm-2 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1));
   }
-  .xrpl-grid__col-sm-3 {
+  .bds-grid__col-sm-3 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1));
   }
-  .xrpl-grid__col-sm-4 {
+  .bds-grid__col-sm-4 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1));
   }
-  .xrpl-grid__col-sm-5 {
+  .bds-grid__col-sm-5 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1));
   }
-  .xrpl-grid__col-sm-6 {
+  .bds-grid__col-sm-6 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1));
   }
-  .xrpl-grid__col-sm-7 {
+  .bds-grid__col-sm-7 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1));
   }
-  .xrpl-grid__col-sm-8 {
+  .bds-grid__col-sm-8 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
   }
-  .xrpl-grid__col-sm-auto {
+  .bds-grid__col-sm-auto {
     flex: 0 0 auto;
     width: auto;
   }
-  .xrpl-grid__offset-sm-0 {
+  .bds-grid__offset-sm-0 {
     margin-left: 0;
   }
-  .xrpl-grid__offset-sm-1 {
+  .bds-grid__offset-sm-1 {
     margin-left: 12.5%;
   }
-  .xrpl-grid__offset-sm-2 {
+  .bds-grid__offset-sm-2 {
     margin-left: 25%;
   }
-  .xrpl-grid__offset-sm-3 {
+  .bds-grid__offset-sm-3 {
     margin-left: 37.5%;
   }
-  .xrpl-grid__offset-sm-4 {
+  .bds-grid__offset-sm-4 {
     margin-left: 50%;
   }
-  .xrpl-grid__offset-sm-5 {
+  .bds-grid__offset-sm-5 {
     margin-left: 62.5%;
   }
-  .xrpl-grid__offset-sm-6 {
+  .bds-grid__offset-sm-6 {
     margin-left: 75%;
   }
-  .xrpl-grid__offset-sm-7 {
+  .bds-grid__offset-sm-7 {
     margin-left: 87.5%;
   }
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-md-fill {
+  .bds-grid__col-md-fill {
     flex: 1 0 0;
     width: auto;
   }
-  .xrpl-grid__col-md-1 {
+  .bds-grid__col-md-1 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 1 + 8px * (1 - 1));
   }
-  .xrpl-grid__col-md-2 {
+  .bds-grid__col-md-2 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 2 + 8px * (2 - 1));
   }
-  .xrpl-grid__col-md-3 {
+  .bds-grid__col-md-3 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 3 + 8px * (3 - 1));
   }
-  .xrpl-grid__col-md-4 {
+  .bds-grid__col-md-4 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 4 + 8px * (4 - 1));
   }
-  .xrpl-grid__col-md-5 {
+  .bds-grid__col-md-5 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 5 + 8px * (5 - 1));
   }
-  .xrpl-grid__col-md-6 {
+  .bds-grid__col-md-6 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 6 + 8px * (6 - 1));
   }
-  .xrpl-grid__col-md-7 {
+  .bds-grid__col-md-7 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 7 + 8px * (7 - 1));
   }
-  .xrpl-grid__col-md-8 {
+  .bds-grid__col-md-8 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (8 - 1)) / 8 * 8 + 8px * (8 - 1));
   }
-  .xrpl-grid__col-md-auto {
+  .bds-grid__col-md-auto {
     flex: 0 0 auto;
     width: auto;
   }
-  .xrpl-grid__offset-md-0 {
+  .bds-grid__offset-md-0 {
     margin-left: 0;
   }
-  .xrpl-grid__offset-md-1 {
+  .bds-grid__offset-md-1 {
     margin-left: 12.5%;
   }
-  .xrpl-grid__offset-md-2 {
+  .bds-grid__offset-md-2 {
     margin-left: 25%;
   }
-  .xrpl-grid__offset-md-3 {
+  .bds-grid__offset-md-3 {
     margin-left: 37.5%;
   }
-  .xrpl-grid__offset-md-4 {
+  .bds-grid__offset-md-4 {
     margin-left: 50%;
   }
-  .xrpl-grid__offset-md-5 {
+  .bds-grid__offset-md-5 {
     margin-left: 62.5%;
   }
-  .xrpl-grid__offset-md-6 {
+  .bds-grid__offset-md-6 {
     margin-left: 75%;
   }
-  .xrpl-grid__offset-md-7 {
+  .bds-grid__offset-md-7 {
     margin-left: 87.5%;
   }
 }
 @media (min-width: 992px) {
-  .xrpl-grid__col-lg-fill {
+  .bds-grid__col-lg-fill {
     flex: 1 0 0;
     width: auto;
   }
-  .xrpl-grid__col-lg-1 {
+  .bds-grid__col-lg-1 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1));
   }
-  .xrpl-grid__col-lg-2 {
+  .bds-grid__col-lg-2 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1));
   }
-  .xrpl-grid__col-lg-3 {
+  .bds-grid__col-lg-3 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1));
   }
-  .xrpl-grid__col-lg-4 {
+  .bds-grid__col-lg-4 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1));
   }
-  .xrpl-grid__col-lg-5 {
+  .bds-grid__col-lg-5 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1));
   }
-  .xrpl-grid__col-lg-6 {
+  .bds-grid__col-lg-6 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1));
   }
-  .xrpl-grid__col-lg-7 {
+  .bds-grid__col-lg-7 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1));
   }
-  .xrpl-grid__col-lg-8 {
+  .bds-grid__col-lg-8 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1));
   }
-  .xrpl-grid__col-lg-9 {
+  .bds-grid__col-lg-9 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1));
   }
-  .xrpl-grid__col-lg-10 {
+  .bds-grid__col-lg-10 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1));
   }
-  .xrpl-grid__col-lg-11 {
+  .bds-grid__col-lg-11 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1));
   }
-  .xrpl-grid__col-lg-12 {
+  .bds-grid__col-lg-12 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1));
   }
-  .xrpl-grid__col-lg-auto {
+  .bds-grid__col-lg-auto {
     flex: 0 0 auto;
     width: auto;
   }
-  .xrpl-grid__offset-lg-0 {
+  .bds-grid__offset-lg-0 {
     margin-left: 0;
   }
-  .xrpl-grid__offset-lg-1 {
+  .bds-grid__offset-lg-1 {
     margin-left: 8.33333333%;
   }
-  .xrpl-grid__offset-lg-2 {
+  .bds-grid__offset-lg-2 {
     margin-left: 16.66666667%;
   }
-  .xrpl-grid__offset-lg-3 {
+  .bds-grid__offset-lg-3 {
     margin-left: 25%;
   }
-  .xrpl-grid__offset-lg-4 {
+  .bds-grid__offset-lg-4 {
     margin-left: 33.33333333%;
   }
-  .xrpl-grid__offset-lg-5 {
+  .bds-grid__offset-lg-5 {
     margin-left: 41.66666667%;
   }
-  .xrpl-grid__offset-lg-6 {
+  .bds-grid__offset-lg-6 {
     margin-left: 50%;
   }
-  .xrpl-grid__offset-lg-7 {
+  .bds-grid__offset-lg-7 {
     margin-left: 58.33333333%;
   }
-  .xrpl-grid__offset-lg-8 {
+  .bds-grid__offset-lg-8 {
     margin-left: 66.66666667%;
   }
-  .xrpl-grid__offset-lg-9 {
+  .bds-grid__offset-lg-9 {
     margin-left: 75%;
   }
-  .xrpl-grid__offset-lg-10 {
+  .bds-grid__offset-lg-10 {
     margin-left: 83.33333333%;
   }
-  .xrpl-grid__offset-lg-11 {
+  .bds-grid__offset-lg-11 {
     margin-left: 91.66666667%;
   }
 }
 @media (min-width: 1280px) {
-  .xrpl-grid__col-xl-fill {
+  .bds-grid__col-xl-fill {
     flex: 1 0 0;
     width: auto;
   }
-  .xrpl-grid__col-xl-1 {
+  .bds-grid__col-xl-1 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 1 + 8px * (1 - 1));
   }
-  .xrpl-grid__col-xl-2 {
+  .bds-grid__col-xl-2 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 2 + 8px * (2 - 1));
   }
-  .xrpl-grid__col-xl-3 {
+  .bds-grid__col-xl-3 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 3 + 8px * (3 - 1));
   }
-  .xrpl-grid__col-xl-4 {
+  .bds-grid__col-xl-4 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 4 + 8px * (4 - 1));
   }
-  .xrpl-grid__col-xl-5 {
+  .bds-grid__col-xl-5 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 5 + 8px * (5 - 1));
   }
-  .xrpl-grid__col-xl-6 {
+  .bds-grid__col-xl-6 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 6 + 8px * (6 - 1));
   }
-  .xrpl-grid__col-xl-7 {
+  .bds-grid__col-xl-7 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 7 + 8px * (7 - 1));
   }
-  .xrpl-grid__col-xl-8 {
+  .bds-grid__col-xl-8 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 8 + 8px * (8 - 1));
   }
-  .xrpl-grid__col-xl-9 {
+  .bds-grid__col-xl-9 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 9 + 8px * (9 - 1));
   }
-  .xrpl-grid__col-xl-10 {
+  .bds-grid__col-xl-10 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 10 + 8px * (10 - 1));
   }
-  .xrpl-grid__col-xl-11 {
+  .bds-grid__col-xl-11 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 11 + 8px * (11 - 1));
   }
-  .xrpl-grid__col-xl-12 {
+  .bds-grid__col-xl-12 {
     flex: 0 0 auto;
     width: calc((100% - 8px * (12 - 1)) / 12 * 12 + 8px * (12 - 1));
   }
-  .xrpl-grid__col-xl-auto {
+  .bds-grid__col-xl-auto {
     flex: 0 0 auto;
     width: auto;
   }
-  .xrpl-grid__offset-xl-0 {
+  .bds-grid__offset-xl-0 {
     margin-left: 0;
   }
-  .xrpl-grid__offset-xl-1 {
+  .bds-grid__offset-xl-1 {
     margin-left: 8.33333333%;
   }
-  .xrpl-grid__offset-xl-2 {
+  .bds-grid__offset-xl-2 {
     margin-left: 16.66666667%;
   }
-  .xrpl-grid__offset-xl-3 {
+  .bds-grid__offset-xl-3 {
     margin-left: 25%;
   }
-  .xrpl-grid__offset-xl-4 {
+  .bds-grid__offset-xl-4 {
     margin-left: 33.33333333%;
   }
-  .xrpl-grid__offset-xl-5 {
+  .bds-grid__offset-xl-5 {
     margin-left: 41.66666667%;
   }
-  .xrpl-grid__offset-xl-6 {
+  .bds-grid__offset-xl-6 {
     margin-left: 50%;
   }
-  .xrpl-grid__offset-xl-7 {
+  .bds-grid__offset-xl-7 {
     margin-left: 58.33333333%;
   }
-  .xrpl-grid__offset-xl-8 {
+  .bds-grid__offset-xl-8 {
     margin-left: 66.66666667%;
   }
-  .xrpl-grid__offset-xl-9 {
+  .bds-grid__offset-xl-9 {
     margin-left: 75%;
   }
-  .xrpl-grid__offset-xl-10 {
+  .bds-grid__offset-xl-10 {
     margin-left: 83.33333333%;
   }
-  .xrpl-grid__offset-xl-11 {
+  .bds-grid__offset-xl-11 {
     margin-left: 91.66666667%;
   }
 }