Move breakpoints, containers, and grid into new layout folder

- Also remove regular flexbox grid styles, leading with CSS Grid
- Move some mixins around

dist/css/bootstrap.css

@@ -1,9 +1,4 @@
 @charset "UTF-8";
-/*!
- * Bootstrap  v5.3.3 (https://getbootstrap.com/)
- * Copyright 2011-2025 The Bootstrap Authors
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- */
 :root,
 [data-bs-theme=light] {
   --bs-gray-100: #f8f9fa;
@@ -855,1077 +850,719 @@ progress {
   --bs-breakpoint-xxl: 1400px;
 }
 
-.row {
+.grid {
-  --bs-gutter-x: 1.5rem;
+  --bs-columns: 12;
-  --bs-gutter-y: 0;
+  --bs-rows: 1;
-  display: flex;
+  --bs-gap: 1.5rem;
-  flex-wrap: wrap;
+  display: grid;
-  margin-top: calc(-1 * var(--bs-gutter-y));
+  grid-template-rows: repeat(var(--bs-rows), 1fr);
-  margin-right: calc(-0.5 * var(--bs-gutter-x));
+  grid-template-columns: repeat(var(--bs-columns), 1fr);
-  margin-left: calc(-0.5 * var(--bs-gutter-x));
+  gap: var(--bs-gap);
-}
-.row > * {
-  flex-shrink: 0;
-  width: 100%;
-  max-width: 100%;
-  padding-right: calc(var(--bs-gutter-x) * 0.5);
-  padding-left: calc(var(--bs-gutter-x) * 0.5);
-  margin-top: var(--bs-gutter-y);
-}
-
-.col {
-  flex: 1 0 0;
-}
-
-.row-cols-auto > * {
-  flex: 0 0 auto;
-  width: auto;
-}
-
-.row-cols-1 > * {
-  flex: 0 0 auto;
-  width: 100%;
-}
-
-.row-cols-2 > * {
-  flex: 0 0 auto;
-  width: 50%;
-}
-
-.row-cols-3 > * {
-  flex: 0 0 auto;
-  width: 33.33333333%;
-}
-
-.row-cols-4 > * {
-  flex: 0 0 auto;
-  width: 25%;
-}
-
-.row-cols-5 > * {
-  flex: 0 0 auto;
-  width: 20%;
-}
-
-.row-cols-6 > * {
-  flex: 0 0 auto;
-  width: 16.66666667%;
-}
-
-.col-auto {
-  flex: 0 0 auto;
-  width: auto;
 }
 
 .col-1 {
-  flex: 0 0 auto;
+  grid-column: auto/span 1;
-  width: 8.33333333%;
+}
+
+.end-1 {
+  grid-column-end: 1;
 }
 
 .col-2 {
-  flex: 0 0 auto;
+  grid-column: auto/span 2;
-  width: 16.66666667%;
+}
+
+.end-2 {
+  grid-column-end: 2;
 }
 
 .col-3 {
-  flex: 0 0 auto;
+  grid-column: auto/span 3;
-  width: 25%;
+}
+
+.end-3 {
+  grid-column-end: 3;
 }
 
 .col-4 {
-  flex: 0 0 auto;
+  grid-column: auto/span 4;
-  width: 33.33333333%;
+}
+
+.end-4 {
+  grid-column-end: 4;
 }
 
 .col-5 {
-  flex: 0 0 auto;
+  grid-column: auto/span 5;
-  width: 41.66666667%;
+}
+
+.end-5 {
+  grid-column-end: 5;
 }
 
 .col-6 {
-  flex: 0 0 auto;
+  grid-column: auto/span 6;
-  width: 50%;
+}
+
+.end-6 {
+  grid-column-end: 6;
 }
 
 .col-7 {
-  flex: 0 0 auto;
+  grid-column: auto/span 7;
-  width: 58.33333333%;
+}
+
+.end-7 {
+  grid-column-end: 7;
 }
 
 .col-8 {
-  flex: 0 0 auto;
+  grid-column: auto/span 8;
-  width: 66.66666667%;
+}
+
+.end-8 {
+  grid-column-end: 8;
 }
 
 .col-9 {
-  flex: 0 0 auto;
+  grid-column: auto/span 9;
-  width: 75%;
+}
+
+.end-9 {
+  grid-column-end: 9;
 }
 
 .col-10 {
-  flex: 0 0 auto;
+  grid-column: auto/span 10;
-  width: 83.33333333%;
+}
+
+.end-10 {
+  grid-column-end: 10;
 }
 
 .col-11 {
-  flex: 0 0 auto;
+  grid-column: auto/span 11;
-  width: 91.66666667%;
+}
+
+.end-11 {
+  grid-column-end: 11;
 }
 
 .col-12 {
-  flex: 0 0 auto;
+  grid-column: auto/span 12;
-  width: 100%;
 }
 
-.offset-1 {
+.end-12 {
-  margin-left: 8.33333333%;
+  grid-column-end: 12;
 }
 
-.offset-2 {
+.col-start-1 {
-  margin-left: 16.66666667%;
+  grid-column-start: 1;
 }
 
-.offset-3 {
+.col-start-2 {
-  margin-left: 25%;
+  grid-column-start: 2;
 }
 
-.offset-4 {
+.col-start-3 {
-  margin-left: 33.33333333%;
+  grid-column-start: 3;
 }
 
-.offset-5 {
+.col-start-4 {
-  margin-left: 41.66666667%;
+  grid-column-start: 4;
 }
 
-.offset-6 {
+.col-start-5 {
-  margin-left: 50%;
+  grid-column-start: 5;
 }
 
-.offset-7 {
+.col-start-6 {
-  margin-left: 58.33333333%;
+  grid-column-start: 6;
 }
 
-.offset-8 {
+.col-start-7 {
-  margin-left: 66.66666667%;
+  grid-column-start: 7;
 }
 
-.offset-9 {
+.col-start-8 {
-  margin-left: 75%;
+  grid-column-start: 8;
 }
 
-.offset-10 {
+.col-start-9 {
-  margin-left: 83.33333333%;
+  grid-column-start: 9;
 }
 
-.offset-11 {
+.col-start-10 {
-  margin-left: 91.66666667%;
+  grid-column-start: 10;
 }
 
-.g-0,
+.col-start-11 {
-.gx-0 {
+  grid-column-start: 11;
-  --bs-gutter-x: 0;
-}
-
-.g-0,
-.gy-0 {
-  --bs-gutter-y: 0;
-}
-
-.g-1,
-.gx-1 {
-  --bs-gutter-x: 0.25rem;
-}
-
-.g-1,
-.gy-1 {
-  --bs-gutter-y: 0.25rem;
-}
-
-.g-2,
-.gx-2 {
-  --bs-gutter-x: 0.5rem;
-}
-
-.g-2,
-.gy-2 {
-  --bs-gutter-y: 0.5rem;
-}
-
-.g-3,
-.gx-3 {
-  --bs-gutter-x: 1rem;
-}
-
-.g-3,
-.gy-3 {
-  --bs-gutter-y: 1rem;
-}
-
-.g-4,
-.gx-4 {
-  --bs-gutter-x: 1.5rem;
-}
-
-.g-4,
-.gy-4 {
-  --bs-gutter-y: 1.5rem;
-}
-
-.g-5,
-.gx-5 {
-  --bs-gutter-x: 3rem;
-}
-
-.g-5,
-.gy-5 {
-  --bs-gutter-y: 3rem;
 }
 
 @media (min-width: 576px) {
-  .col-sm {
-    flex: 1 0 0;
-  }
-  .row-cols-sm-auto > * {
-    flex: 0 0 auto;
-    width: auto;
-  }
-  .row-cols-sm-1 > * {
-    flex: 0 0 auto;
-    width: 100%;
-  }
-  .row-cols-sm-2 > * {
-    flex: 0 0 auto;
-    width: 50%;
-  }
-  .row-cols-sm-3 > * {
-    flex: 0 0 auto;
-    width: 33.33333333%;
-  }
-  .row-cols-sm-4 > * {
-    flex: 0 0 auto;
-    width: 25%;
-  }
-  .row-cols-sm-5 > * {
-    flex: 0 0 auto;
-    width: 20%;
-  }
-  .row-cols-sm-6 > * {
-    flex: 0 0 auto;
-    width: 16.66666667%;
-  }
-  .col-sm-auto {
-    flex: 0 0 auto;
-    width: auto;
-  }
   .col-sm-1 {
-    flex: 0 0 auto;
+    grid-column: auto/span 1;
-    width: 8.33333333%;
+  }
+  .end-sm-1 {
+    grid-column-end: 1;
   }
   .col-sm-2 {
-    flex: 0 0 auto;
+    grid-column: auto/span 2;
-    width: 16.66666667%;
+  }
+  .end-sm-2 {
+    grid-column-end: 2;
   }
   .col-sm-3 {
-    flex: 0 0 auto;
+    grid-column: auto/span 3;
-    width: 25%;
+  }
+  .end-sm-3 {
+    grid-column-end: 3;
   }
   .col-sm-4 {
-    flex: 0 0 auto;
+    grid-column: auto/span 4;
-    width: 33.33333333%;
+  }
+  .end-sm-4 {
+    grid-column-end: 4;
   }
   .col-sm-5 {
-    flex: 0 0 auto;
+    grid-column: auto/span 5;
-    width: 41.66666667%;
+  }
+  .end-sm-5 {
+    grid-column-end: 5;
   }
   .col-sm-6 {
-    flex: 0 0 auto;
+    grid-column: auto/span 6;
-    width: 50%;
+  }
+  .end-sm-6 {
+    grid-column-end: 6;
   }
   .col-sm-7 {
-    flex: 0 0 auto;
+    grid-column: auto/span 7;
-    width: 58.33333333%;
+  }
+  .end-sm-7 {
+    grid-column-end: 7;
   }
   .col-sm-8 {
-    flex: 0 0 auto;
+    grid-column: auto/span 8;
-    width: 66.66666667%;
+  }
+  .end-sm-8 {
+    grid-column-end: 8;
   }
   .col-sm-9 {
-    flex: 0 0 auto;
+    grid-column: auto/span 9;
-    width: 75%;
+  }
+  .end-sm-9 {
+    grid-column-end: 9;
   }
   .col-sm-10 {
-    flex: 0 0 auto;
+    grid-column: auto/span 10;
-    width: 83.33333333%;
+  }
+  .end-sm-10 {
+    grid-column-end: 10;
   }
   .col-sm-11 {
-    flex: 0 0 auto;
+    grid-column: auto/span 11;
-    width: 91.66666667%;
+  }
+  .end-sm-11 {
+    grid-column-end: 11;
   }
   .col-sm-12 {
-    flex: 0 0 auto;
+    grid-column: auto/span 12;
-    width: 100%;
   }
-  .offset-sm-0 {
+  .end-sm-12 {
-    margin-left: 0;
+    grid-column-end: 12;
   }
-  .offset-sm-1 {
+  .col-start-sm-1 {
-    margin-left: 8.33333333%;
+    grid-column-start: 1;
   }
-  .offset-sm-2 {
+  .col-start-sm-2 {
-    margin-left: 16.66666667%;
+    grid-column-start: 2;
   }
-  .offset-sm-3 {
+  .col-start-sm-3 {
-    margin-left: 25%;
+    grid-column-start: 3;
   }
-  .offset-sm-4 {
+  .col-start-sm-4 {
-    margin-left: 33.33333333%;
+    grid-column-start: 4;
   }
-  .offset-sm-5 {
+  .col-start-sm-5 {
-    margin-left: 41.66666667%;
+    grid-column-start: 5;
   }
-  .offset-sm-6 {
+  .col-start-sm-6 {
-    margin-left: 50%;
+    grid-column-start: 6;
   }
-  .offset-sm-7 {
+  .col-start-sm-7 {
-    margin-left: 58.33333333%;
+    grid-column-start: 7;
   }
-  .offset-sm-8 {
+  .col-start-sm-8 {
-    margin-left: 66.66666667%;
+    grid-column-start: 8;
   }
-  .offset-sm-9 {
+  .col-start-sm-9 {
-    margin-left: 75%;
+    grid-column-start: 9;
   }
-  .offset-sm-10 {
+  .col-start-sm-10 {
-    margin-left: 83.33333333%;
+    grid-column-start: 10;
   }
-  .offset-sm-11 {
+  .col-start-sm-11 {
-    margin-left: 91.66666667%;
+    grid-column-start: 11;
-  }
-  .g-sm-0,
-  .gx-sm-0 {
-    --bs-gutter-x: 0;
-  }
-  .g-sm-0,
-  .gy-sm-0 {
-    --bs-gutter-y: 0;
-  }
-  .g-sm-1,
-  .gx-sm-1 {
-    --bs-gutter-x: 0.25rem;
-  }
-  .g-sm-1,
-  .gy-sm-1 {
-    --bs-gutter-y: 0.25rem;
-  }
-  .g-sm-2,
-  .gx-sm-2 {
-    --bs-gutter-x: 0.5rem;
-  }
-  .g-sm-2,
-  .gy-sm-2 {
-    --bs-gutter-y: 0.5rem;
-  }
-  .g-sm-3,
-  .gx-sm-3 {
-    --bs-gutter-x: 1rem;
-  }
-  .g-sm-3,
-  .gy-sm-3 {
-    --bs-gutter-y: 1rem;
-  }
-  .g-sm-4,
-  .gx-sm-4 {
-    --bs-gutter-x: 1.5rem;
-  }
-  .g-sm-4,
-  .gy-sm-4 {
-    --bs-gutter-y: 1.5rem;
-  }
-  .g-sm-5,
-  .gx-sm-5 {
-    --bs-gutter-x: 3rem;
-  }
-  .g-sm-5,
-  .gy-sm-5 {
-    --bs-gutter-y: 3rem;
   }
 }
 @media (min-width: 768px) {
-  .col-md {
-    flex: 1 0 0;
-  }
-  .row-cols-md-auto > * {
-    flex: 0 0 auto;
-    width: auto;
-  }
-  .row-cols-md-1 > * {
-    flex: 0 0 auto;
-    width: 100%;
-  }
-  .row-cols-md-2 > * {
-    flex: 0 0 auto;
-    width: 50%;
-  }
-  .row-cols-md-3 > * {
-    flex: 0 0 auto;
-    width: 33.33333333%;
-  }
-  .row-cols-md-4 > * {
-    flex: 0 0 auto;
-    width: 25%;
-  }
-  .row-cols-md-5 > * {
-    flex: 0 0 auto;
-    width: 20%;
-  }
-  .row-cols-md-6 > * {
-    flex: 0 0 auto;
-    width: 16.66666667%;
-  }
-  .col-md-auto {
-    flex: 0 0 auto;
-    width: auto;
-  }
   .col-md-1 {
-    flex: 0 0 auto;
+    grid-column: auto/span 1;
-    width: 8.33333333%;
+  }
+  .end-md-1 {
+    grid-column-end: 1;
   }
   .col-md-2 {
-    flex: 0 0 auto;
+    grid-column: auto/span 2;
-    width: 16.66666667%;
+  }
+  .end-md-2 {
+    grid-column-end: 2;
   }
   .col-md-3 {
-    flex: 0 0 auto;
+    grid-column: auto/span 3;
-    width: 25%;
+  }
+  .end-md-3 {
+    grid-column-end: 3;
   }
   .col-md-4 {
-    flex: 0 0 auto;
+    grid-column: auto/span 4;
-    width: 33.33333333%;
+  }
+  .end-md-4 {
+    grid-column-end: 4;
   }
   .col-md-5 {
-    flex: 0 0 auto;
+    grid-column: auto/span 5;
-    width: 41.66666667%;
+  }
+  .end-md-5 {
+    grid-column-end: 5;
   }
   .col-md-6 {
-    flex: 0 0 auto;
+    grid-column: auto/span 6;
-    width: 50%;
+  }
+  .end-md-6 {
+    grid-column-end: 6;
   }
   .col-md-7 {
-    flex: 0 0 auto;
+    grid-column: auto/span 7;
-    width: 58.33333333%;
+  }
+  .end-md-7 {
+    grid-column-end: 7;
   }
   .col-md-8 {
-    flex: 0 0 auto;
+    grid-column: auto/span 8;
-    width: 66.66666667%;
+  }
+  .end-md-8 {
+    grid-column-end: 8;
   }
   .col-md-9 {
-    flex: 0 0 auto;
+    grid-column: auto/span 9;
-    width: 75%;
+  }
+  .end-md-9 {
+    grid-column-end: 9;
   }
   .col-md-10 {
-    flex: 0 0 auto;
+    grid-column: auto/span 10;
-    width: 83.33333333%;
+  }
+  .end-md-10 {
+    grid-column-end: 10;
   }
   .col-md-11 {
-    flex: 0 0 auto;
+    grid-column: auto/span 11;
-    width: 91.66666667%;
+  }
+  .end-md-11 {
+    grid-column-end: 11;
   }
   .col-md-12 {
-    flex: 0 0 auto;
+    grid-column: auto/span 12;
-    width: 100%;
   }
-  .offset-md-0 {
+  .end-md-12 {
-    margin-left: 0;
+    grid-column-end: 12;
   }
-  .offset-md-1 {
+  .col-start-md-1 {
-    margin-left: 8.33333333%;
+    grid-column-start: 1;
   }
-  .offset-md-2 {
+  .col-start-md-2 {
-    margin-left: 16.66666667%;
+    grid-column-start: 2;
   }
-  .offset-md-3 {
+  .col-start-md-3 {
-    margin-left: 25%;
+    grid-column-start: 3;
   }
-  .offset-md-4 {
+  .col-start-md-4 {
-    margin-left: 33.33333333%;
+    grid-column-start: 4;
   }
-  .offset-md-5 {
+  .col-start-md-5 {
-    margin-left: 41.66666667%;
+    grid-column-start: 5;
   }
-  .offset-md-6 {
+  .col-start-md-6 {
-    margin-left: 50%;
+    grid-column-start: 6;
   }
-  .offset-md-7 {
+  .col-start-md-7 {
-    margin-left: 58.33333333%;
+    grid-column-start: 7;
   }
-  .offset-md-8 {
+  .col-start-md-8 {
-    margin-left: 66.66666667%;
+    grid-column-start: 8;
   }
-  .offset-md-9 {
+  .col-start-md-9 {
-    margin-left: 75%;
+    grid-column-start: 9;
   }
-  .offset-md-10 {
+  .col-start-md-10 {
-    margin-left: 83.33333333%;
+    grid-column-start: 10;
   }
-  .offset-md-11 {
+  .col-start-md-11 {
-    margin-left: 91.66666667%;
+    grid-column-start: 11;
-  }
-  .g-md-0,
-  .gx-md-0 {
-    --bs-gutter-x: 0;
-  }
-  .g-md-0,
-  .gy-md-0 {
-    --bs-gutter-y: 0;
-  }
-  .g-md-1,
-  .gx-md-1 {
-    --bs-gutter-x: 0.25rem;
-  }
-  .g-md-1,
-  .gy-md-1 {
-    --bs-gutter-y: 0.25rem;
-  }
-  .g-md-2,
-  .gx-md-2 {
-    --bs-gutter-x: 0.5rem;
-  }
-  .g-md-2,
-  .gy-md-2 {
-    --bs-gutter-y: 0.5rem;
-  }
-  .g-md-3,
-  .gx-md-3 {
-    --bs-gutter-x: 1rem;
-  }
-  .g-md-3,
-  .gy-md-3 {
-    --bs-gutter-y: 1rem;
-  }
-  .g-md-4,
-  .gx-md-4 {
-    --bs-gutter-x: 1.5rem;
-  }
-  .g-md-4,
-  .gy-md-4 {
-    --bs-gutter-y: 1.5rem;
-  }
-  .g-md-5,
-  .gx-md-5 {
-    --bs-gutter-x: 3rem;
-  }
-  .g-md-5,
-  .gy-md-5 {
-    --bs-gutter-y: 3rem;
   }
 }
 @media (min-width: 992px) {
-  .col-lg {
-    flex: 1 0 0;
-  }
-  .row-cols-lg-auto > * {
-    flex: 0 0 auto;
-    width: auto;
-  }
-  .row-cols-lg-1 > * {
-    flex: 0 0 auto;
-    width: 100%;
-  }
-  .row-cols-lg-2 > * {
-    flex: 0 0 auto;
-    width: 50%;
-  }
-  .row-cols-lg-3 > * {
-    flex: 0 0 auto;
-    width: 33.33333333%;
-  }
-  .row-cols-lg-4 > * {
-    flex: 0 0 auto;
-    width: 25%;
-  }
-  .row-cols-lg-5 > * {
-    flex: 0 0 auto;
-    width: 20%;
-  }
-  .row-cols-lg-6 > * {
-    flex: 0 0 auto;
-    width: 16.66666667%;
-  }
-  .col-lg-auto {
-    flex: 0 0 auto;
-    width: auto;
-  }
   .col-lg-1 {
-    flex: 0 0 auto;
+    grid-column: auto/span 1;
-    width: 8.33333333%;
+  }
+  .end-lg-1 {
+    grid-column-end: 1;
   }
   .col-lg-2 {
-    flex: 0 0 auto;
+    grid-column: auto/span 2;
-    width: 16.66666667%;
+  }
+  .end-lg-2 {
+    grid-column-end: 2;
   }
   .col-lg-3 {
-    flex: 0 0 auto;
+    grid-column: auto/span 3;
-    width: 25%;
+  }
+  .end-lg-3 {
+    grid-column-end: 3;
   }
   .col-lg-4 {
-    flex: 0 0 auto;
+    grid-column: auto/span 4;
-    width: 33.33333333%;
+  }
+  .end-lg-4 {
+    grid-column-end: 4;
   }
   .col-lg-5 {
-    flex: 0 0 auto;
+    grid-column: auto/span 5;
-    width: 41.66666667%;
+  }
+  .end-lg-5 {
+    grid-column-end: 5;
   }
   .col-lg-6 {
-    flex: 0 0 auto;
+    grid-column: auto/span 6;
-    width: 50%;
+  }
+  .end-lg-6 {
+    grid-column-end: 6;
   }
   .col-lg-7 {
-    flex: 0 0 auto;
+    grid-column: auto/span 7;
-    width: 58.33333333%;
+  }
+  .end-lg-7 {
+    grid-column-end: 7;
   }
   .col-lg-8 {
-    flex: 0 0 auto;
+    grid-column: auto/span 8;
-    width: 66.66666667%;
+  }
+  .end-lg-8 {
+    grid-column-end: 8;
   }
   .col-lg-9 {
-    flex: 0 0 auto;
+    grid-column: auto/span 9;
-    width: 75%;
+  }
+  .end-lg-9 {
+    grid-column-end: 9;
   }
   .col-lg-10 {
-    flex: 0 0 auto;
+    grid-column: auto/span 10;
-    width: 83.33333333%;
+  }
+  .end-lg-10 {
+    grid-column-end: 10;
   }
   .col-lg-11 {
-    flex: 0 0 auto;
+    grid-column: auto/span 11;
-    width: 91.66666667%;
+  }
+  .end-lg-11 {
+    grid-column-end: 11;
   }
   .col-lg-12 {
-    flex: 0 0 auto;
+    grid-column: auto/span 12;
-    width: 100%;
   }
-  .offset-lg-0 {
+  .end-lg-12 {
-    margin-left: 0;
+    grid-column-end: 12;
   }
-  .offset-lg-1 {
+  .col-start-lg-1 {
-    margin-left: 8.33333333%;
+    grid-column-start: 1;
   }
-  .offset-lg-2 {
+  .col-start-lg-2 {
-    margin-left: 16.66666667%;
+    grid-column-start: 2;
   }
-  .offset-lg-3 {
+  .col-start-lg-3 {
-    margin-left: 25%;
+    grid-column-start: 3;
   }
-  .offset-lg-4 {
+  .col-start-lg-4 {
-    margin-left: 33.33333333%;
+    grid-column-start: 4;
   }
-  .offset-lg-5 {
+  .col-start-lg-5 {
-    margin-left: 41.66666667%;
+    grid-column-start: 5;
   }
-  .offset-lg-6 {
+  .col-start-lg-6 {
-    margin-left: 50%;
+    grid-column-start: 6;
   }
-  .offset-lg-7 {
+  .col-start-lg-7 {
-    margin-left: 58.33333333%;
+    grid-column-start: 7;
   }
-  .offset-lg-8 {
+  .col-start-lg-8 {
-    margin-left: 66.66666667%;
+    grid-column-start: 8;
   }
-  .offset-lg-9 {
+  .col-start-lg-9 {
-    margin-left: 75%;
+    grid-column-start: 9;
   }
-  .offset-lg-10 {
+  .col-start-lg-10 {
-    margin-left: 83.33333333%;
+    grid-column-start: 10;
   }
-  .offset-lg-11 {
+  .col-start-lg-11 {
-    margin-left: 91.66666667%;
+    grid-column-start: 11;
-  }
-  .g-lg-0,
-  .gx-lg-0 {
-    --bs-gutter-x: 0;
-  }
-  .g-lg-0,
-  .gy-lg-0 {
-    --bs-gutter-y: 0;
-  }
-  .g-lg-1,
-  .gx-lg-1 {
-    --bs-gutter-x: 0.25rem;
-  }
-  .g-lg-1,
-  .gy-lg-1 {
-    --bs-gutter-y: 0.25rem;
-  }
-  .g-lg-2,
-  .gx-lg-2 {
-    --bs-gutter-x: 0.5rem;
-  }
-  .g-lg-2,
-  .gy-lg-2 {
-    --bs-gutter-y: 0.5rem;
-  }
-  .g-lg-3,
-  .gx-lg-3 {
-    --bs-gutter-x: 1rem;
-  }
-  .g-lg-3,
-  .gy-lg-3 {
-    --bs-gutter-y: 1rem;
-  }
-  .g-lg-4,
-  .gx-lg-4 {
-    --bs-gutter-x: 1.5rem;
-  }
-  .g-lg-4,
-  .gy-lg-4 {
-    --bs-gutter-y: 1.5rem;
-  }
-  .g-lg-5,
-  .gx-lg-5 {
-    --bs-gutter-x: 3rem;
-  }
-  .g-lg-5,
-  .gy-lg-5 {
-    --bs-gutter-y: 3rem;
   }
 }
 @media (min-width: 1200px) {
-  .col-xl {
-    flex: 1 0 0;
-  }
-  .row-cols-xl-auto > * {
-    flex: 0 0 auto;
-    width: auto;
-  }
-  .row-cols-xl-1 > * {
-    flex: 0 0 auto;
-    width: 100%;
-  }
-  .row-cols-xl-2 > * {
-    flex: 0 0 auto;
-    width: 50%;
-  }
-  .row-cols-xl-3 > * {
-    flex: 0 0 auto;
-    width: 33.33333333%;
-  }
-  .row-cols-xl-4 > * {
-    flex: 0 0 auto;
-    width: 25%;
-  }
-  .row-cols-xl-5 > * {
-    flex: 0 0 auto;
-    width: 20%;
-  }
-  .row-cols-xl-6 > * {
-    flex: 0 0 auto;
-    width: 16.66666667%;
-  }
-  .col-xl-auto {
-    flex: 0 0 auto;
-    width: auto;
-  }
   .col-xl-1 {
-    flex: 0 0 auto;
+    grid-column: auto/span 1;
-    width: 8.33333333%;
+  }
+  .end-xl-1 {
+    grid-column-end: 1;
   }
   .col-xl-2 {
-    flex: 0 0 auto;
+    grid-column: auto/span 2;
-    width: 16.66666667%;
+  }
+  .end-xl-2 {
+    grid-column-end: 2;
   }
   .col-xl-3 {
-    flex: 0 0 auto;
+    grid-column: auto/span 3;
-    width: 25%;
+  }
+  .end-xl-3 {
+    grid-column-end: 3;
   }
   .col-xl-4 {
-    flex: 0 0 auto;
+    grid-column: auto/span 4;
-    width: 33.33333333%;
+  }
+  .end-xl-4 {
+    grid-column-end: 4;
   }
   .col-xl-5 {
-    flex: 0 0 auto;
+    grid-column: auto/span 5;
-    width: 41.66666667%;
+  }
+  .end-xl-5 {
+    grid-column-end: 5;
   }
   .col-xl-6 {
-    flex: 0 0 auto;
+    grid-column: auto/span 6;
-    width: 50%;
+  }
+  .end-xl-6 {
+    grid-column-end: 6;
   }
   .col-xl-7 {
-    flex: 0 0 auto;
+    grid-column: auto/span 7;
-    width: 58.33333333%;
+  }
+  .end-xl-7 {
+    grid-column-end: 7;
   }
   .col-xl-8 {
-    flex: 0 0 auto;
+    grid-column: auto/span 8;
-    width: 66.66666667%;
+  }
+  .end-xl-8 {
+    grid-column-end: 8;
   }
   .col-xl-9 {
-    flex: 0 0 auto;
+    grid-column: auto/span 9;
-    width: 75%;
+  }
+  .end-xl-9 {
+    grid-column-end: 9;
   }
   .col-xl-10 {
-    flex: 0 0 auto;
+    grid-column: auto/span 10;
-    width: 83.33333333%;
+  }
+  .end-xl-10 {
+    grid-column-end: 10;
   }
   .col-xl-11 {
-    flex: 0 0 auto;
+    grid-column: auto/span 11;
-    width: 91.66666667%;
+  }
+  .end-xl-11 {
+    grid-column-end: 11;
   }
   .col-xl-12 {
-    flex: 0 0 auto;
+    grid-column: auto/span 12;
-    width: 100%;
   }
-  .offset-xl-0 {
+  .end-xl-12 {
-    margin-left: 0;
+    grid-column-end: 12;
   }
-  .offset-xl-1 {
+  .col-start-xl-1 {
-    margin-left: 8.33333333%;
+    grid-column-start: 1;
   }
-  .offset-xl-2 {
+  .col-start-xl-2 {
-    margin-left: 16.66666667%;
+    grid-column-start: 2;
   }
-  .offset-xl-3 {
+  .col-start-xl-3 {
-    margin-left: 25%;
+    grid-column-start: 3;
   }
-  .offset-xl-4 {
+  .col-start-xl-4 {
-    margin-left: 33.33333333%;
+    grid-column-start: 4;
   }
-  .offset-xl-5 {
+  .col-start-xl-5 {
-    margin-left: 41.66666667%;
+    grid-column-start: 5;
   }
-  .offset-xl-6 {
+  .col-start-xl-6 {
-    margin-left: 50%;
+    grid-column-start: 6;
   }
-  .offset-xl-7 {
+  .col-start-xl-7 {
-    margin-left: 58.33333333%;
+    grid-column-start: 7;
   }
-  .offset-xl-8 {
+  .col-start-xl-8 {
-    margin-left: 66.66666667%;
+    grid-column-start: 8;
   }
-  .offset-xl-9 {
+  .col-start-xl-9 {
-    margin-left: 75%;
+    grid-column-start: 9;
   }
-  .offset-xl-10 {
+  .col-start-xl-10 {
-    margin-left: 83.33333333%;
+    grid-column-start: 10;
   }
-  .offset-xl-11 {
+  .col-start-xl-11 {
-    margin-left: 91.66666667%;
+    grid-column-start: 11;
-  }
-  .g-xl-0,
-  .gx-xl-0 {
-    --bs-gutter-x: 0;
-  }
-  .g-xl-0,
-  .gy-xl-0 {
-    --bs-gutter-y: 0;
-  }
-  .g-xl-1,
-  .gx-xl-1 {
-    --bs-gutter-x: 0.25rem;
-  }
-  .g-xl-1,
-  .gy-xl-1 {
-    --bs-gutter-y: 0.25rem;
-  }
-  .g-xl-2,
-  .gx-xl-2 {
-    --bs-gutter-x: 0.5rem;
-  }
-  .g-xl-2,
-  .gy-xl-2 {
-    --bs-gutter-y: 0.5rem;
-  }
-  .g-xl-3,
-  .gx-xl-3 {
-    --bs-gutter-x: 1rem;
-  }
-  .g-xl-3,
-  .gy-xl-3 {
-    --bs-gutter-y: 1rem;
-  }
-  .g-xl-4,
-  .gx-xl-4 {
-    --bs-gutter-x: 1.5rem;
-  }
-  .g-xl-4,
-  .gy-xl-4 {
-    --bs-gutter-y: 1.5rem;
-  }
-  .g-xl-5,
-  .gx-xl-5 {
-    --bs-gutter-x: 3rem;
-  }
-  .g-xl-5,
-  .gy-xl-5 {
-    --bs-gutter-y: 3rem;
   }
 }
 @media (min-width: 1400px) {
-  .col-xxl {
-    flex: 1 0 0;
-  }
-  .row-cols-xxl-auto > * {
-    flex: 0 0 auto;
-    width: auto;
-  }
-  .row-cols-xxl-1 > * {
-    flex: 0 0 auto;
-    width: 100%;
-  }
-  .row-cols-xxl-2 > * {
-    flex: 0 0 auto;
-    width: 50%;
-  }
-  .row-cols-xxl-3 > * {
-    flex: 0 0 auto;
-    width: 33.33333333%;
-  }
-  .row-cols-xxl-4 > * {
-    flex: 0 0 auto;
-    width: 25%;
-  }
-  .row-cols-xxl-5 > * {
-    flex: 0 0 auto;
-    width: 20%;
-  }
-  .row-cols-xxl-6 > * {
-    flex: 0 0 auto;
-    width: 16.66666667%;
-  }
-  .col-xxl-auto {
-    flex: 0 0 auto;
-    width: auto;
-  }
   .col-xxl-1 {
-    flex: 0 0 auto;
+    grid-column: auto/span 1;
-    width: 8.33333333%;
+  }
+  .end-xxl-1 {
+    grid-column-end: 1;
   }
   .col-xxl-2 {
-    flex: 0 0 auto;
+    grid-column: auto/span 2;
-    width: 16.66666667%;
+  }
+  .end-xxl-2 {
+    grid-column-end: 2;
   }
   .col-xxl-3 {
-    flex: 0 0 auto;
+    grid-column: auto/span 3;
-    width: 25%;
+  }
+  .end-xxl-3 {
+    grid-column-end: 3;
   }
   .col-xxl-4 {
-    flex: 0 0 auto;
+    grid-column: auto/span 4;
-    width: 33.33333333%;
+  }
+  .end-xxl-4 {
+    grid-column-end: 4;
   }
   .col-xxl-5 {
-    flex: 0 0 auto;
+    grid-column: auto/span 5;
-    width: 41.66666667%;
+  }
+  .end-xxl-5 {
+    grid-column-end: 5;
   }
   .col-xxl-6 {
-    flex: 0 0 auto;
+    grid-column: auto/span 6;
-    width: 50%;
+  }
+  .end-xxl-6 {
+    grid-column-end: 6;
   }
   .col-xxl-7 {
-    flex: 0 0 auto;
+    grid-column: auto/span 7;
-    width: 58.33333333%;
+  }
+  .end-xxl-7 {
+    grid-column-end: 7;
   }
   .col-xxl-8 {
-    flex: 0 0 auto;
+    grid-column: auto/span 8;
-    width: 66.66666667%;
+  }
+  .end-xxl-8 {
+    grid-column-end: 8;
   }
   .col-xxl-9 {
-    flex: 0 0 auto;
+    grid-column: auto/span 9;
-    width: 75%;
+  }
+  .end-xxl-9 {
+    grid-column-end: 9;
   }
   .col-xxl-10 {
-    flex: 0 0 auto;
+    grid-column: auto/span 10;
-    width: 83.33333333%;
+  }
+  .end-xxl-10 {
+    grid-column-end: 10;
   }
   .col-xxl-11 {
-    flex: 0 0 auto;
+    grid-column: auto/span 11;
-    width: 91.66666667%;
+  }
+  .end-xxl-11 {
+    grid-column-end: 11;
   }
   .col-xxl-12 {
-    flex: 0 0 auto;
+    grid-column: auto/span 12;
-    width: 100%;
   }
-  .offset-xxl-0 {
+  .end-xxl-12 {
-    margin-left: 0;
+    grid-column-end: 12;
   }
-  .offset-xxl-1 {
+  .col-start-xxl-1 {
-    margin-left: 8.33333333%;
+    grid-column-start: 1;
   }
-  .offset-xxl-2 {
+  .col-start-xxl-2 {
-    margin-left: 16.66666667%;
+    grid-column-start: 2;
   }
-  .offset-xxl-3 {
+  .col-start-xxl-3 {
-    margin-left: 25%;
+    grid-column-start: 3;
   }
-  .offset-xxl-4 {
+  .col-start-xxl-4 {
-    margin-left: 33.33333333%;
+    grid-column-start: 4;
   }
-  .offset-xxl-5 {
+  .col-start-xxl-5 {
-    margin-left: 41.66666667%;
+    grid-column-start: 5;
   }
-  .offset-xxl-6 {
+  .col-start-xxl-6 {
-    margin-left: 50%;
+    grid-column-start: 6;
   }
-  .offset-xxl-7 {
+  .col-start-xxl-7 {
-    margin-left: 58.33333333%;
+    grid-column-start: 7;
   }
-  .offset-xxl-8 {
+  .col-start-xxl-8 {
-    margin-left: 66.66666667%;
+    grid-column-start: 8;
   }
-  .offset-xxl-9 {
+  .col-start-xxl-9 {
-    margin-left: 75%;
+    grid-column-start: 9;
   }
-  .offset-xxl-10 {
+  .col-start-xxl-10 {
-    margin-left: 83.33333333%;
+    grid-column-start: 10;
   }
-  .offset-xxl-11 {
+  .col-start-xxl-11 {
-    margin-left: 91.66666667%;
+    grid-column-start: 11;
-  }
-  .g-xxl-0,
-  .gx-xxl-0 {
-    --bs-gutter-x: 0;
-  }
-  .g-xxl-0,
-  .gy-xxl-0 {
-    --bs-gutter-y: 0;
-  }
-  .g-xxl-1,
-  .gx-xxl-1 {
-    --bs-gutter-x: 0.25rem;
-  }
-  .g-xxl-1,
-  .gy-xxl-1 {
-    --bs-gutter-y: 0.25rem;
-  }
-  .g-xxl-2,
-  .gx-xxl-2 {
-    --bs-gutter-x: 0.5rem;
-  }
-  .g-xxl-2,
-  .gy-xxl-2 {
-    --bs-gutter-y: 0.5rem;
-  }
-  .g-xxl-3,
-  .gx-xxl-3 {
-    --bs-gutter-x: 1rem;
-  }
-  .g-xxl-3,
-  .gy-xxl-3 {
-    --bs-gutter-y: 1rem;
-  }
-  .g-xxl-4,
-  .gx-xxl-4 {
-    --bs-gutter-x: 1.5rem;
-  }
-  .g-xxl-4,
-  .gy-xxl-4 {
-    --bs-gutter-y: 1.5rem;
-  }
-  .g-xxl-5,
-  .gx-xxl-5 {
-    --bs-gutter-x: 3rem;
-  }
-  .g-xxl-5,
-  .gy-xxl-5 {
-    --bs-gutter-y: 3rem;
   }
 }
+.grid-cols-subgrid {
+  grid-template-columns: subgrid;
+}
+
+.grid-fill {
+  --bs-gap: 1.5rem;
+  display: grid;
+  grid-auto-flow: row;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  gap: var(--bs-gap);
+}
+
+.g-col-auto {
+  grid-column: auto/auto;
+}
+
+.grid-cols-3 {
+  --bs-columns: 3;
+}
+
+.grid-cols-4 {
+  --bs-columns: 4;
+}
+
+.grid-cols-6 {
+  --bs-columns: 6;
+}
+
 .table {
   --bs-table-color-type: initial;
   --bs-table-bg-type: initial;

dist/css/bootstrap.rtl.css

@@ -1,9 +1,4 @@
 @charset "UTF-8";
-/*!
- * Bootstrap  v5.3.3 (https://getbootstrap.com/)
- * Copyright 2011-2025 The Bootstrap Authors
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- */
 :root,
 [data-bs-theme=light] {
   --bs-gray-100: #f8f9fa;
@@ -853,1077 +848,719 @@ progress {
   --bs-breakpoint-xxl: 1400px;
 }
 
-.row {
+.grid {
-  --bs-gutter-x: 1.5rem;
+  --bs-columns: 12;
-  --bs-gutter-y: 0;
+  --bs-rows: 1;
-  display: flex;
+  --bs-gap: 1.5rem;
-  flex-wrap: wrap;
+  display: grid;
-  margin-top: calc(-1 * var(--bs-gutter-y));
+  grid-template-rows: repeat(var(--bs-rows), 1fr);
-  margin-left: calc(-0.5 * var(--bs-gutter-x));
+  grid-template-columns: repeat(var(--bs-columns), 1fr);
-  margin-right: calc(-0.5 * var(--bs-gutter-x));
+  gap: var(--bs-gap);
-}
-.row > * {
-  flex-shrink: 0;
-  width: 100%;
-  max-width: 100%;
-  padding-left: calc(var(--bs-gutter-x) * 0.5);
-  padding-right: calc(var(--bs-gutter-x) * 0.5);
-  margin-top: var(--bs-gutter-y);
-}
-
-.col {
-  flex: 1 0 0;
-}
-
-.row-cols-auto > * {
-  flex: 0 0 auto;
-  width: auto;
-}
-
-.row-cols-1 > * {
-  flex: 0 0 auto;
-  width: 100%;
-}
-
-.row-cols-2 > * {
-  flex: 0 0 auto;
-  width: 50%;
-}
-
-.row-cols-3 > * {
-  flex: 0 0 auto;
-  width: 33.33333333%;
-}
-
-.row-cols-4 > * {
-  flex: 0 0 auto;
-  width: 25%;
-}
-
-.row-cols-5 > * {
-  flex: 0 0 auto;
-  width: 20%;
-}
-
-.row-cols-6 > * {
-  flex: 0 0 auto;
-  width: 16.66666667%;
-}
-
-.col-auto {
-  flex: 0 0 auto;
-  width: auto;
 }
 
 .col-1 {
-  flex: 0 0 auto;
+  grid-column: auto/span 1;
-  width: 8.33333333%;
+}
+
+.end-1 {
+  grid-column-end: 1;
 }
 
 .col-2 {
-  flex: 0 0 auto;
+  grid-column: auto/span 2;
-  width: 16.66666667%;
+}
+
+.end-2 {
+  grid-column-end: 2;
 }
 
 .col-3 {
-  flex: 0 0 auto;
+  grid-column: auto/span 3;
-  width: 25%;
+}
+
+.end-3 {
+  grid-column-end: 3;
 }
 
 .col-4 {
-  flex: 0 0 auto;
+  grid-column: auto/span 4;
-  width: 33.33333333%;
+}
+
+.end-4 {
+  grid-column-end: 4;
 }
 
 .col-5 {
-  flex: 0 0 auto;
+  grid-column: auto/span 5;
-  width: 41.66666667%;
+}
+
+.end-5 {
+  grid-column-end: 5;
 }
 
 .col-6 {
-  flex: 0 0 auto;
+  grid-column: auto/span 6;
-  width: 50%;
+}
+
+.end-6 {
+  grid-column-end: 6;
 }
 
 .col-7 {
-  flex: 0 0 auto;
+  grid-column: auto/span 7;
-  width: 58.33333333%;
+}
+
+.end-7 {
+  grid-column-end: 7;
 }
 
 .col-8 {
-  flex: 0 0 auto;
+  grid-column: auto/span 8;
-  width: 66.66666667%;
+}
+
+.end-8 {
+  grid-column-end: 8;
 }
 
 .col-9 {
-  flex: 0 0 auto;
+  grid-column: auto/span 9;
-  width: 75%;
+}
+
+.end-9 {
+  grid-column-end: 9;
 }
 
 .col-10 {
-  flex: 0 0 auto;
+  grid-column: auto/span 10;
-  width: 83.33333333%;
+}
+
+.end-10 {
+  grid-column-end: 10;
 }
 
 .col-11 {
-  flex: 0 0 auto;
+  grid-column: auto/span 11;
-  width: 91.66666667%;
+}
+
+.end-11 {
+  grid-column-end: 11;
 }
 
 .col-12 {
-  flex: 0 0 auto;
+  grid-column: auto/span 12;
-  width: 100%;
 }
 
-.offset-1 {
+.end-12 {
-  margin-right: 8.33333333%;
+  grid-column-end: 12;
 }
 
-.offset-2 {
+.col-start-1 {
-  margin-right: 16.66666667%;
+  grid-column-start: 1;
 }
 
-.offset-3 {
+.col-start-2 {
-  margin-right: 25%;
+  grid-column-start: 2;
 }
 
-.offset-4 {
+.col-start-3 {
-  margin-right: 33.33333333%;
+  grid-column-start: 3;
 }
 
-.offset-5 {
+.col-start-4 {
-  margin-right: 41.66666667%;
+  grid-column-start: 4;
 }
 
-.offset-6 {
+.col-start-5 {
-  margin-right: 50%;
+  grid-column-start: 5;
 }
 
-.offset-7 {
+.col-start-6 {
-  margin-right: 58.33333333%;
+  grid-column-start: 6;
 }
 
-.offset-8 {
+.col-start-7 {
-  margin-right: 66.66666667%;
+  grid-column-start: 7;
 }
 
-.offset-9 {
+.col-start-8 {
-  margin-right: 75%;
+  grid-column-start: 8;
 }
 
-.offset-10 {
+.col-start-9 {
-  margin-right: 83.33333333%;
+  grid-column-start: 9;
 }
 
-.offset-11 {
+.col-start-10 {
-  margin-right: 91.66666667%;
+  grid-column-start: 10;
 }
 
-.g-0,
+.col-start-11 {
-.gx-0 {
+  grid-column-start: 11;
-  --bs-gutter-x: 0;
-}
-
-.g-0,
-.gy-0 {
-  --bs-gutter-y: 0;
-}
-
-.g-1,
-.gx-1 {
-  --bs-gutter-x: 0.25rem;
-}
-
-.g-1,
-.gy-1 {
-  --bs-gutter-y: 0.25rem;
-}
-
-.g-2,
-.gx-2 {
-  --bs-gutter-x: 0.5rem;
-}
-
-.g-2,
-.gy-2 {
-  --bs-gutter-y: 0.5rem;
-}
-
-.g-3,
-.gx-3 {
-  --bs-gutter-x: 1rem;
-}
-
-.g-3,
-.gy-3 {
-  --bs-gutter-y: 1rem;
-}
-
-.g-4,
-.gx-4 {
-  --bs-gutter-x: 1.5rem;
-}
-
-.g-4,
-.gy-4 {
-  --bs-gutter-y: 1.5rem;
-}
-
-.g-5,
-.gx-5 {
-  --bs-gutter-x: 3rem;
-}
-
-.g-5,
-.gy-5 {
-  --bs-gutter-y: 3rem;
 }
 
 @media (min-width: 576px) {
-  .col-sm {
-    flex: 1 0 0;
-  }
-  .row-cols-sm-auto > * {
-    flex: 0 0 auto;
-    width: auto;
-  }
-  .row-cols-sm-1 > * {
-    flex: 0 0 auto;
-    width: 100%;
-  }
-  .row-cols-sm-2 > * {
-    flex: 0 0 auto;
-    width: 50%;
-  }
-  .row-cols-sm-3 > * {
-    flex: 0 0 auto;
-    width: 33.33333333%;
-  }
-  .row-cols-sm-4 > * {
-    flex: 0 0 auto;
-    width: 25%;
-  }
-  .row-cols-sm-5 > * {
-    flex: 0 0 auto;
-    width: 20%;
-  }
-  .row-cols-sm-6 > * {
-    flex: 0 0 auto;
-    width: 16.66666667%;
-  }
-  .col-sm-auto {
-    flex: 0 0 auto;
-    width: auto;
-  }
   .col-sm-1 {
-    flex: 0 0 auto;
+    grid-column: auto/span 1;
-    width: 8.33333333%;
+  }
+  .end-sm-1 {
+    grid-column-end: 1;
   }
   .col-sm-2 {
-    flex: 0 0 auto;
+    grid-column: auto/span 2;
-    width: 16.66666667%;
+  }
+  .end-sm-2 {
+    grid-column-end: 2;
   }
   .col-sm-3 {
-    flex: 0 0 auto;
+    grid-column: auto/span 3;
-    width: 25%;
+  }
+  .end-sm-3 {
+    grid-column-end: 3;
   }
   .col-sm-4 {
-    flex: 0 0 auto;
+    grid-column: auto/span 4;
-    width: 33.33333333%;
+  }
+  .end-sm-4 {
+    grid-column-end: 4;
   }
   .col-sm-5 {
-    flex: 0 0 auto;
+    grid-column: auto/span 5;
-    width: 41.66666667%;
+  }
+  .end-sm-5 {
+    grid-column-end: 5;
   }
   .col-sm-6 {
-    flex: 0 0 auto;
+    grid-column: auto/span 6;
-    width: 50%;
+  }
+  .end-sm-6 {
+    grid-column-end: 6;
   }
   .col-sm-7 {
-    flex: 0 0 auto;
+    grid-column: auto/span 7;
-    width: 58.33333333%;
+  }
+  .end-sm-7 {
+    grid-column-end: 7;
   }
   .col-sm-8 {
-    flex: 0 0 auto;
+    grid-column: auto/span 8;
-    width: 66.66666667%;
+  }
+  .end-sm-8 {
+    grid-column-end: 8;
   }
   .col-sm-9 {
-    flex: 0 0 auto;
+    grid-column: auto/span 9;
-    width: 75%;
+  }
+  .end-sm-9 {
+    grid-column-end: 9;
   }
   .col-sm-10 {
-    flex: 0 0 auto;
+    grid-column: auto/span 10;
-    width: 83.33333333%;
+  }
+  .end-sm-10 {
+    grid-column-end: 10;
   }
   .col-sm-11 {
-    flex: 0 0 auto;
+    grid-column: auto/span 11;
-    width: 91.66666667%;
+  }
+  .end-sm-11 {
+    grid-column-end: 11;
   }
   .col-sm-12 {
-    flex: 0 0 auto;
+    grid-column: auto/span 12;
-    width: 100%;
   }
-  .offset-sm-0 {
+  .end-sm-12 {
-    margin-right: 0;
+    grid-column-end: 12;
   }
-  .offset-sm-1 {
+  .col-start-sm-1 {
-    margin-right: 8.33333333%;
+    grid-column-start: 1;
   }
-  .offset-sm-2 {
+  .col-start-sm-2 {
-    margin-right: 16.66666667%;
+    grid-column-start: 2;
   }
-  .offset-sm-3 {
+  .col-start-sm-3 {
-    margin-right: 25%;
+    grid-column-start: 3;
   }
-  .offset-sm-4 {
+  .col-start-sm-4 {
-    margin-right: 33.33333333%;
+    grid-column-start: 4;
   }
-  .offset-sm-5 {
+  .col-start-sm-5 {
-    margin-right: 41.66666667%;
+    grid-column-start: 5;
   }
-  .offset-sm-6 {
+  .col-start-sm-6 {
-    margin-right: 50%;
+    grid-column-start: 6;
   }
-  .offset-sm-7 {
+  .col-start-sm-7 {
-    margin-right: 58.33333333%;
+    grid-column-start: 7;
   }
-  .offset-sm-8 {
+  .col-start-sm-8 {
-    margin-right: 66.66666667%;
+    grid-column-start: 8;
   }
-  .offset-sm-9 {
+  .col-start-sm-9 {
-    margin-right: 75%;
+    grid-column-start: 9;
   }
-  .offset-sm-10 {
+  .col-start-sm-10 {
-    margin-right: 83.33333333%;
+    grid-column-start: 10;
   }
-  .offset-sm-11 {
+  .col-start-sm-11 {
-    margin-right: 91.66666667%;
+    grid-column-start: 11;
-  }
-  .g-sm-0,
-  .gx-sm-0 {
-    --bs-gutter-x: 0;
-  }
-  .g-sm-0,
-  .gy-sm-0 {
-    --bs-gutter-y: 0;
-  }
-  .g-sm-1,
-  .gx-sm-1 {
-    --bs-gutter-x: 0.25rem;
-  }
-  .g-sm-1,
-  .gy-sm-1 {
-    --bs-gutter-y: 0.25rem;
-  }
-  .g-sm-2,
-  .gx-sm-2 {
-    --bs-gutter-x: 0.5rem;
-  }
-  .g-sm-2,
-  .gy-sm-2 {
-    --bs-gutter-y: 0.5rem;
-  }
-  .g-sm-3,
-  .gx-sm-3 {
-    --bs-gutter-x: 1rem;
-  }
-  .g-sm-3,
-  .gy-sm-3 {
-    --bs-gutter-y: 1rem;
-  }
-  .g-sm-4,
-  .gx-sm-4 {
-    --bs-gutter-x: 1.5rem;
-  }
-  .g-sm-4,
-  .gy-sm-4 {
-    --bs-gutter-y: 1.5rem;
-  }
-  .g-sm-5,
-  .gx-sm-5 {
-    --bs-gutter-x: 3rem;
-  }
-  .g-sm-5,
-  .gy-sm-5 {
-    --bs-gutter-y: 3rem;
   }
 }
 @media (min-width: 768px) {
-  .col-md {
-    flex: 1 0 0;
-  }
-  .row-cols-md-auto > * {
-    flex: 0 0 auto;
-    width: auto;
-  }
-  .row-cols-md-1 > * {
-    flex: 0 0 auto;
-    width: 100%;
-  }
-  .row-cols-md-2 > * {
-    flex: 0 0 auto;
-    width: 50%;
-  }
-  .row-cols-md-3 > * {
-    flex: 0 0 auto;
-    width: 33.33333333%;
-  }
-  .row-cols-md-4 > * {
-    flex: 0 0 auto;
-    width: 25%;
-  }
-  .row-cols-md-5 > * {
-    flex: 0 0 auto;
-    width: 20%;
-  }
-  .row-cols-md-6 > * {
-    flex: 0 0 auto;
-    width: 16.66666667%;
-  }
-  .col-md-auto {
-    flex: 0 0 auto;
-    width: auto;
-  }
   .col-md-1 {
-    flex: 0 0 auto;
+    grid-column: auto/span 1;
-    width: 8.33333333%;
+  }
+  .end-md-1 {
+    grid-column-end: 1;
   }
   .col-md-2 {
-    flex: 0 0 auto;
+    grid-column: auto/span 2;
-    width: 16.66666667%;
+  }
+  .end-md-2 {
+    grid-column-end: 2;
   }
   .col-md-3 {
-    flex: 0 0 auto;
+    grid-column: auto/span 3;
-    width: 25%;
+  }
+  .end-md-3 {
+    grid-column-end: 3;
   }
   .col-md-4 {
-    flex: 0 0 auto;
+    grid-column: auto/span 4;
-    width: 33.33333333%;
+  }
+  .end-md-4 {
+    grid-column-end: 4;
   }
   .col-md-5 {
-    flex: 0 0 auto;
+    grid-column: auto/span 5;
-    width: 41.66666667%;
+  }
+  .end-md-5 {
+    grid-column-end: 5;
   }
   .col-md-6 {
-    flex: 0 0 auto;
+    grid-column: auto/span 6;
-    width: 50%;
+  }
+  .end-md-6 {
+    grid-column-end: 6;
   }
   .col-md-7 {
-    flex: 0 0 auto;
+    grid-column: auto/span 7;
-    width: 58.33333333%;
+  }
+  .end-md-7 {
+    grid-column-end: 7;
   }
   .col-md-8 {
-    flex: 0 0 auto;
+    grid-column: auto/span 8;
-    width: 66.66666667%;
+  }
+  .end-md-8 {
+    grid-column-end: 8;
   }
   .col-md-9 {
-    flex: 0 0 auto;
+    grid-column: auto/span 9;
-    width: 75%;
+  }
+  .end-md-9 {
+    grid-column-end: 9;
   }
   .col-md-10 {
-    flex: 0 0 auto;
+    grid-column: auto/span 10;
-    width: 83.33333333%;
+  }
+  .end-md-10 {
+    grid-column-end: 10;
   }
   .col-md-11 {
-    flex: 0 0 auto;
+    grid-column: auto/span 11;
-    width: 91.66666667%;
+  }
+  .end-md-11 {
+    grid-column-end: 11;
   }
   .col-md-12 {
-    flex: 0 0 auto;
+    grid-column: auto/span 12;
-    width: 100%;
   }
-  .offset-md-0 {
+  .end-md-12 {
-    margin-right: 0;
+    grid-column-end: 12;
   }
-  .offset-md-1 {
+  .col-start-md-1 {
-    margin-right: 8.33333333%;
+    grid-column-start: 1;
   }
-  .offset-md-2 {
+  .col-start-md-2 {
-    margin-right: 16.66666667%;
+    grid-column-start: 2;
   }
-  .offset-md-3 {
+  .col-start-md-3 {
-    margin-right: 25%;
+    grid-column-start: 3;
   }
-  .offset-md-4 {
+  .col-start-md-4 {
-    margin-right: 33.33333333%;
+    grid-column-start: 4;
   }
-  .offset-md-5 {
+  .col-start-md-5 {
-    margin-right: 41.66666667%;
+    grid-column-start: 5;
   }
-  .offset-md-6 {
+  .col-start-md-6 {
-    margin-right: 50%;
+    grid-column-start: 6;
   }
-  .offset-md-7 {
+  .col-start-md-7 {
-    margin-right: 58.33333333%;
+    grid-column-start: 7;
   }
-  .offset-md-8 {
+  .col-start-md-8 {
-    margin-right: 66.66666667%;
+    grid-column-start: 8;
   }
-  .offset-md-9 {
+  .col-start-md-9 {
-    margin-right: 75%;
+    grid-column-start: 9;
   }
-  .offset-md-10 {
+  .col-start-md-10 {
-    margin-right: 83.33333333%;
+    grid-column-start: 10;
   }
-  .offset-md-11 {
+  .col-start-md-11 {
-    margin-right: 91.66666667%;
+    grid-column-start: 11;
-  }
-  .g-md-0,
-  .gx-md-0 {
-    --bs-gutter-x: 0;
-  }
-  .g-md-0,
-  .gy-md-0 {
-    --bs-gutter-y: 0;
-  }
-  .g-md-1,
-  .gx-md-1 {
-    --bs-gutter-x: 0.25rem;
-  }
-  .g-md-1,
-  .gy-md-1 {
-    --bs-gutter-y: 0.25rem;
-  }
-  .g-md-2,
-  .gx-md-2 {
-    --bs-gutter-x: 0.5rem;
-  }
-  .g-md-2,
-  .gy-md-2 {
-    --bs-gutter-y: 0.5rem;
-  }
-  .g-md-3,
-  .gx-md-3 {
-    --bs-gutter-x: 1rem;
-  }
-  .g-md-3,
-  .gy-md-3 {
-    --bs-gutter-y: 1rem;
-  }
-  .g-md-4,
-  .gx-md-4 {
-    --bs-gutter-x: 1.5rem;
-  }
-  .g-md-4,
-  .gy-md-4 {
-    --bs-gutter-y: 1.5rem;
-  }
-  .g-md-5,
-  .gx-md-5 {
-    --bs-gutter-x: 3rem;
-  }
-  .g-md-5,
-  .gy-md-5 {
-    --bs-gutter-y: 3rem;
   }
 }
 @media (min-width: 992px) {
-  .col-lg {
-    flex: 1 0 0;
-  }
-  .row-cols-lg-auto > * {
-    flex: 0 0 auto;
-    width: auto;
-  }
-  .row-cols-lg-1 > * {
-    flex: 0 0 auto;
-    width: 100%;
-  }
-  .row-cols-lg-2 > * {
-    flex: 0 0 auto;
-    width: 50%;
-  }
-  .row-cols-lg-3 > * {
-    flex: 0 0 auto;
-    width: 33.33333333%;
-  }
-  .row-cols-lg-4 > * {
-    flex: 0 0 auto;
-    width: 25%;
-  }
-  .row-cols-lg-5 > * {
-    flex: 0 0 auto;
-    width: 20%;
-  }
-  .row-cols-lg-6 > * {
-    flex: 0 0 auto;
-    width: 16.66666667%;
-  }
-  .col-lg-auto {
-    flex: 0 0 auto;
-    width: auto;
-  }
   .col-lg-1 {
-    flex: 0 0 auto;
+    grid-column: auto/span 1;
-    width: 8.33333333%;
+  }
+  .end-lg-1 {
+    grid-column-end: 1;
   }
   .col-lg-2 {
-    flex: 0 0 auto;
+    grid-column: auto/span 2;
-    width: 16.66666667%;
+  }
+  .end-lg-2 {
+    grid-column-end: 2;
   }
   .col-lg-3 {
-    flex: 0 0 auto;
+    grid-column: auto/span 3;
-    width: 25%;
+  }
+  .end-lg-3 {
+    grid-column-end: 3;
   }
   .col-lg-4 {
-    flex: 0 0 auto;
+    grid-column: auto/span 4;
-    width: 33.33333333%;
+  }
+  .end-lg-4 {
+    grid-column-end: 4;
   }
   .col-lg-5 {
-    flex: 0 0 auto;
+    grid-column: auto/span 5;
-    width: 41.66666667%;
+  }
+  .end-lg-5 {
+    grid-column-end: 5;
   }
   .col-lg-6 {
-    flex: 0 0 auto;
+    grid-column: auto/span 6;
-    width: 50%;
+  }
+  .end-lg-6 {
+    grid-column-end: 6;
   }
   .col-lg-7 {
-    flex: 0 0 auto;
+    grid-column: auto/span 7;
-    width: 58.33333333%;
+  }
+  .end-lg-7 {
+    grid-column-end: 7;
   }
   .col-lg-8 {
-    flex: 0 0 auto;
+    grid-column: auto/span 8;
-    width: 66.66666667%;
+  }
+  .end-lg-8 {
+    grid-column-end: 8;
   }
   .col-lg-9 {
-    flex: 0 0 auto;
+    grid-column: auto/span 9;
-    width: 75%;
+  }
+  .end-lg-9 {
+    grid-column-end: 9;
   }
   .col-lg-10 {
-    flex: 0 0 auto;
+    grid-column: auto/span 10;
-    width: 83.33333333%;
+  }
+  .end-lg-10 {
+    grid-column-end: 10;
   }
   .col-lg-11 {
-    flex: 0 0 auto;
+    grid-column: auto/span 11;
-    width: 91.66666667%;
+  }
+  .end-lg-11 {
+    grid-column-end: 11;
   }
   .col-lg-12 {
-    flex: 0 0 auto;
+    grid-column: auto/span 12;
-    width: 100%;
   }
-  .offset-lg-0 {
+  .end-lg-12 {
-    margin-right: 0;
+    grid-column-end: 12;
   }
-  .offset-lg-1 {
+  .col-start-lg-1 {
-    margin-right: 8.33333333%;
+    grid-column-start: 1;
   }
-  .offset-lg-2 {
+  .col-start-lg-2 {
-    margin-right: 16.66666667%;
+    grid-column-start: 2;
   }
-  .offset-lg-3 {
+  .col-start-lg-3 {
-    margin-right: 25%;
+    grid-column-start: 3;
   }
-  .offset-lg-4 {
+  .col-start-lg-4 {
-    margin-right: 33.33333333%;
+    grid-column-start: 4;
   }
-  .offset-lg-5 {
+  .col-start-lg-5 {
-    margin-right: 41.66666667%;
+    grid-column-start: 5;
   }
-  .offset-lg-6 {
+  .col-start-lg-6 {
-    margin-right: 50%;
+    grid-column-start: 6;
   }
-  .offset-lg-7 {
+  .col-start-lg-7 {
-    margin-right: 58.33333333%;
+    grid-column-start: 7;
   }
-  .offset-lg-8 {
+  .col-start-lg-8 {
-    margin-right: 66.66666667%;
+    grid-column-start: 8;
   }
-  .offset-lg-9 {
+  .col-start-lg-9 {
-    margin-right: 75%;
+    grid-column-start: 9;
   }
-  .offset-lg-10 {
+  .col-start-lg-10 {
-    margin-right: 83.33333333%;
+    grid-column-start: 10;
   }
-  .offset-lg-11 {
+  .col-start-lg-11 {
-    margin-right: 91.66666667%;
+    grid-column-start: 11;
-  }
-  .g-lg-0,
-  .gx-lg-0 {
-    --bs-gutter-x: 0;
-  }
-  .g-lg-0,
-  .gy-lg-0 {
-    --bs-gutter-y: 0;
-  }
-  .g-lg-1,
-  .gx-lg-1 {
-    --bs-gutter-x: 0.25rem;
-  }
-  .g-lg-1,
-  .gy-lg-1 {
-    --bs-gutter-y: 0.25rem;
-  }
-  .g-lg-2,
-  .gx-lg-2 {
-    --bs-gutter-x: 0.5rem;
-  }
-  .g-lg-2,
-  .gy-lg-2 {
-    --bs-gutter-y: 0.5rem;
-  }
-  .g-lg-3,
-  .gx-lg-3 {
-    --bs-gutter-x: 1rem;
-  }
-  .g-lg-3,
-  .gy-lg-3 {
-    --bs-gutter-y: 1rem;
-  }
-  .g-lg-4,
-  .gx-lg-4 {
-    --bs-gutter-x: 1.5rem;
-  }
-  .g-lg-4,
-  .gy-lg-4 {
-    --bs-gutter-y: 1.5rem;
-  }
-  .g-lg-5,
-  .gx-lg-5 {
-    --bs-gutter-x: 3rem;
-  }
-  .g-lg-5,
-  .gy-lg-5 {
-    --bs-gutter-y: 3rem;
   }
 }
 @media (min-width: 1200px) {
-  .col-xl {
-    flex: 1 0 0;
-  }
-  .row-cols-xl-auto > * {
-    flex: 0 0 auto;
-    width: auto;
-  }
-  .row-cols-xl-1 > * {
-    flex: 0 0 auto;
-    width: 100%;
-  }
-  .row-cols-xl-2 > * {
-    flex: 0 0 auto;
-    width: 50%;
-  }
-  .row-cols-xl-3 > * {
-    flex: 0 0 auto;
-    width: 33.33333333%;
-  }
-  .row-cols-xl-4 > * {
-    flex: 0 0 auto;
-    width: 25%;
-  }
-  .row-cols-xl-5 > * {
-    flex: 0 0 auto;
-    width: 20%;
-  }
-  .row-cols-xl-6 > * {
-    flex: 0 0 auto;
-    width: 16.66666667%;
-  }
-  .col-xl-auto {
-    flex: 0 0 auto;
-    width: auto;
-  }
   .col-xl-1 {
-    flex: 0 0 auto;
+    grid-column: auto/span 1;
-    width: 8.33333333%;
+  }
+  .end-xl-1 {
+    grid-column-end: 1;
   }
   .col-xl-2 {
-    flex: 0 0 auto;
+    grid-column: auto/span 2;
-    width: 16.66666667%;
+  }
+  .end-xl-2 {
+    grid-column-end: 2;
   }
   .col-xl-3 {
-    flex: 0 0 auto;
+    grid-column: auto/span 3;
-    width: 25%;
+  }
+  .end-xl-3 {
+    grid-column-end: 3;
   }
   .col-xl-4 {
-    flex: 0 0 auto;
+    grid-column: auto/span 4;
-    width: 33.33333333%;
+  }
+  .end-xl-4 {
+    grid-column-end: 4;
   }
   .col-xl-5 {
-    flex: 0 0 auto;
+    grid-column: auto/span 5;
-    width: 41.66666667%;
+  }
+  .end-xl-5 {
+    grid-column-end: 5;
   }
   .col-xl-6 {
-    flex: 0 0 auto;
+    grid-column: auto/span 6;
-    width: 50%;
+  }
+  .end-xl-6 {
+    grid-column-end: 6;
   }
   .col-xl-7 {
-    flex: 0 0 auto;
+    grid-column: auto/span 7;
-    width: 58.33333333%;
+  }
+  .end-xl-7 {
+    grid-column-end: 7;
   }
   .col-xl-8 {
-    flex: 0 0 auto;
+    grid-column: auto/span 8;
-    width: 66.66666667%;
+  }
+  .end-xl-8 {
+    grid-column-end: 8;
   }
   .col-xl-9 {
-    flex: 0 0 auto;
+    grid-column: auto/span 9;
-    width: 75%;
+  }
+  .end-xl-9 {
+    grid-column-end: 9;
   }
   .col-xl-10 {
-    flex: 0 0 auto;
+    grid-column: auto/span 10;
-    width: 83.33333333%;
+  }
+  .end-xl-10 {
+    grid-column-end: 10;
   }
   .col-xl-11 {
-    flex: 0 0 auto;
+    grid-column: auto/span 11;
-    width: 91.66666667%;
+  }
+  .end-xl-11 {
+    grid-column-end: 11;
   }
   .col-xl-12 {
-    flex: 0 0 auto;
+    grid-column: auto/span 12;
-    width: 100%;
   }
-  .offset-xl-0 {
+  .end-xl-12 {
-    margin-right: 0;
+    grid-column-end: 12;
   }
-  .offset-xl-1 {
+  .col-start-xl-1 {
-    margin-right: 8.33333333%;
+    grid-column-start: 1;
   }
-  .offset-xl-2 {
+  .col-start-xl-2 {
-    margin-right: 16.66666667%;
+    grid-column-start: 2;
   }
-  .offset-xl-3 {
+  .col-start-xl-3 {
-    margin-right: 25%;
+    grid-column-start: 3;
   }
-  .offset-xl-4 {
+  .col-start-xl-4 {
-    margin-right: 33.33333333%;
+    grid-column-start: 4;
   }
-  .offset-xl-5 {
+  .col-start-xl-5 {
-    margin-right: 41.66666667%;
+    grid-column-start: 5;
   }
-  .offset-xl-6 {
+  .col-start-xl-6 {
-    margin-right: 50%;
+    grid-column-start: 6;
   }
-  .offset-xl-7 {
+  .col-start-xl-7 {
-    margin-right: 58.33333333%;
+    grid-column-start: 7;
   }
-  .offset-xl-8 {
+  .col-start-xl-8 {
-    margin-right: 66.66666667%;
+    grid-column-start: 8;
   }
-  .offset-xl-9 {
+  .col-start-xl-9 {
-    margin-right: 75%;
+    grid-column-start: 9;
   }
-  .offset-xl-10 {
+  .col-start-xl-10 {
-    margin-right: 83.33333333%;
+    grid-column-start: 10;
   }
-  .offset-xl-11 {
+  .col-start-xl-11 {
-    margin-right: 91.66666667%;
+    grid-column-start: 11;
-  }
-  .g-xl-0,
-  .gx-xl-0 {
-    --bs-gutter-x: 0;
-  }
-  .g-xl-0,
-  .gy-xl-0 {
-    --bs-gutter-y: 0;
-  }
-  .g-xl-1,
-  .gx-xl-1 {
-    --bs-gutter-x: 0.25rem;
-  }
-  .g-xl-1,
-  .gy-xl-1 {
-    --bs-gutter-y: 0.25rem;
-  }
-  .g-xl-2,
-  .gx-xl-2 {
-    --bs-gutter-x: 0.5rem;
-  }
-  .g-xl-2,
-  .gy-xl-2 {
-    --bs-gutter-y: 0.5rem;
-  }
-  .g-xl-3,
-  .gx-xl-3 {
-    --bs-gutter-x: 1rem;
-  }
-  .g-xl-3,
-  .gy-xl-3 {
-    --bs-gutter-y: 1rem;
-  }
-  .g-xl-4,
-  .gx-xl-4 {
-    --bs-gutter-x: 1.5rem;
-  }
-  .g-xl-4,
-  .gy-xl-4 {
-    --bs-gutter-y: 1.5rem;
-  }
-  .g-xl-5,
-  .gx-xl-5 {
-    --bs-gutter-x: 3rem;
-  }
-  .g-xl-5,
-  .gy-xl-5 {
-    --bs-gutter-y: 3rem;
   }
 }
 @media (min-width: 1400px) {
-  .col-xxl {
-    flex: 1 0 0;
-  }
-  .row-cols-xxl-auto > * {
-    flex: 0 0 auto;
-    width: auto;
-  }
-  .row-cols-xxl-1 > * {
-    flex: 0 0 auto;
-    width: 100%;
-  }
-  .row-cols-xxl-2 > * {
-    flex: 0 0 auto;
-    width: 50%;
-  }
-  .row-cols-xxl-3 > * {
-    flex: 0 0 auto;
-    width: 33.33333333%;
-  }
-  .row-cols-xxl-4 > * {
-    flex: 0 0 auto;
-    width: 25%;
-  }
-  .row-cols-xxl-5 > * {
-    flex: 0 0 auto;
-    width: 20%;
-  }
-  .row-cols-xxl-6 > * {
-    flex: 0 0 auto;
-    width: 16.66666667%;
-  }
-  .col-xxl-auto {
-    flex: 0 0 auto;
-    width: auto;
-  }
   .col-xxl-1 {
-    flex: 0 0 auto;
+    grid-column: auto/span 1;
-    width: 8.33333333%;
+  }
+  .end-xxl-1 {
+    grid-column-end: 1;
   }
   .col-xxl-2 {
-    flex: 0 0 auto;
+    grid-column: auto/span 2;
-    width: 16.66666667%;
+  }
+  .end-xxl-2 {
+    grid-column-end: 2;
   }
   .col-xxl-3 {
-    flex: 0 0 auto;
+    grid-column: auto/span 3;
-    width: 25%;
+  }
+  .end-xxl-3 {
+    grid-column-end: 3;
   }
   .col-xxl-4 {
-    flex: 0 0 auto;
+    grid-column: auto/span 4;
-    width: 33.33333333%;
+  }
+  .end-xxl-4 {
+    grid-column-end: 4;
   }
   .col-xxl-5 {
-    flex: 0 0 auto;
+    grid-column: auto/span 5;
-    width: 41.66666667%;
+  }
+  .end-xxl-5 {
+    grid-column-end: 5;
   }
   .col-xxl-6 {
-    flex: 0 0 auto;
+    grid-column: auto/span 6;
-    width: 50%;
+  }
+  .end-xxl-6 {
+    grid-column-end: 6;
   }
   .col-xxl-7 {
-    flex: 0 0 auto;
+    grid-column: auto/span 7;
-    width: 58.33333333%;
+  }
+  .end-xxl-7 {
+    grid-column-end: 7;
   }
   .col-xxl-8 {
-    flex: 0 0 auto;
+    grid-column: auto/span 8;
-    width: 66.66666667%;
+  }
+  .end-xxl-8 {
+    grid-column-end: 8;
   }
   .col-xxl-9 {
-    flex: 0 0 auto;
+    grid-column: auto/span 9;
-    width: 75%;
+  }
+  .end-xxl-9 {
+    grid-column-end: 9;
   }
   .col-xxl-10 {
-    flex: 0 0 auto;
+    grid-column: auto/span 10;
-    width: 83.33333333%;
+  }
+  .end-xxl-10 {
+    grid-column-end: 10;
   }
   .col-xxl-11 {
-    flex: 0 0 auto;
+    grid-column: auto/span 11;
-    width: 91.66666667%;
+  }
+  .end-xxl-11 {
+    grid-column-end: 11;
   }
   .col-xxl-12 {
-    flex: 0 0 auto;
+    grid-column: auto/span 12;
-    width: 100%;
   }
-  .offset-xxl-0 {
+  .end-xxl-12 {
-    margin-right: 0;
+    grid-column-end: 12;
   }
-  .offset-xxl-1 {
+  .col-start-xxl-1 {
-    margin-right: 8.33333333%;
+    grid-column-start: 1;
   }
-  .offset-xxl-2 {
+  .col-start-xxl-2 {
-    margin-right: 16.66666667%;
+    grid-column-start: 2;
   }
-  .offset-xxl-3 {
+  .col-start-xxl-3 {
-    margin-right: 25%;
+    grid-column-start: 3;
   }
-  .offset-xxl-4 {
+  .col-start-xxl-4 {
-    margin-right: 33.33333333%;
+    grid-column-start: 4;
   }
-  .offset-xxl-5 {
+  .col-start-xxl-5 {
-    margin-right: 41.66666667%;
+    grid-column-start: 5;
   }
-  .offset-xxl-6 {
+  .col-start-xxl-6 {
-    margin-right: 50%;
+    grid-column-start: 6;
   }
-  .offset-xxl-7 {
+  .col-start-xxl-7 {
-    margin-right: 58.33333333%;
+    grid-column-start: 7;
   }
-  .offset-xxl-8 {
+  .col-start-xxl-8 {
-    margin-right: 66.66666667%;
+    grid-column-start: 8;
   }
-  .offset-xxl-9 {
+  .col-start-xxl-9 {
-    margin-right: 75%;
+    grid-column-start: 9;
   }
-  .offset-xxl-10 {
+  .col-start-xxl-10 {
-    margin-right: 83.33333333%;
+    grid-column-start: 10;
   }
-  .offset-xxl-11 {
+  .col-start-xxl-11 {
-    margin-right: 91.66666667%;
+    grid-column-start: 11;
-  }
-  .g-xxl-0,
-  .gx-xxl-0 {
-    --bs-gutter-x: 0;
-  }
-  .g-xxl-0,
-  .gy-xxl-0 {
-    --bs-gutter-y: 0;
-  }
-  .g-xxl-1,
-  .gx-xxl-1 {
-    --bs-gutter-x: 0.25rem;
-  }
-  .g-xxl-1,
-  .gy-xxl-1 {
-    --bs-gutter-y: 0.25rem;
-  }
-  .g-xxl-2,
-  .gx-xxl-2 {
-    --bs-gutter-x: 0.5rem;
-  }
-  .g-xxl-2,
-  .gy-xxl-2 {
-    --bs-gutter-y: 0.5rem;
-  }
-  .g-xxl-3,
-  .gx-xxl-3 {
-    --bs-gutter-x: 1rem;
-  }
-  .g-xxl-3,
-  .gy-xxl-3 {
-    --bs-gutter-y: 1rem;
-  }
-  .g-xxl-4,
-  .gx-xxl-4 {
-    --bs-gutter-x: 1.5rem;
-  }
-  .g-xxl-4,
-  .gy-xxl-4 {
-    --bs-gutter-y: 1.5rem;
-  }
-  .g-xxl-5,
-  .gx-xxl-5 {
-    --bs-gutter-x: 3rem;
-  }
-  .g-xxl-5,
-  .gy-xxl-5 {
-    --bs-gutter-y: 3rem;
   }
 }
+.grid-cols-subgrid {
+  grid-template-columns: subgrid;
+}
+
+.grid-fill {
+  --bs-gap: 1.5rem;
+  display: grid;
+  grid-auto-flow: row;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  gap: var(--bs-gap);
+}
+
+.g-col-auto {
+  grid-column: auto/auto;
+}
+
+.grid-cols-3 {
+  --bs-columns: 3;
+}
+
+.grid-cols-4 {
+  --bs-columns: 4;
+}
+
+.grid-cols-6 {
+  --bs-columns: 6;
+}
+
 .table {
   --bs-table-color-type: initial;
   --bs-table-bg-type: initial;

dist/css/layout/index.css

@@ -0,0 +1,764 @@
+.container,
+.container-fluid,
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  width: 100%;
+  padding-right: calc(var(--bs-gutter-x) * 0.5);
+  padding-left: calc(var(--bs-gutter-x) * 0.5);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) {
+  .container-sm, .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container-md, .container-sm, .container {
+    max-width: 720px;
+  }
+}
+@media (min-width: 992px) {
+  .container-lg, .container-md, .container-sm, .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1140px;
+  }
+}
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
+:root {
+  --bs-breakpoint-xs: 0;
+  --bs-breakpoint-sm: 576px;
+  --bs-breakpoint-md: 768px;
+  --bs-breakpoint-lg: 992px;
+  --bs-breakpoint-xl: 1200px;
+  --bs-breakpoint-xxl: 1400px;
+}
+
+.grid {
+  --bs-columns: 12;
+  --bs-rows: 1;
+  --bs-gap: 1.5rem;
+  display: grid;
+  grid-template-rows: repeat(var(--bs-rows), 1fr);
+  grid-template-columns: repeat(var(--bs-columns), 1fr);
+  gap: var(--bs-gap);
+}
+
+.col-1 {
+  grid-column: auto/span 1;
+}
+
+.end-1 {
+  grid-column-end: 1;
+}
+
+.col-2 {
+  grid-column: auto/span 2;
+}
+
+.end-2 {
+  grid-column-end: 2;
+}
+
+.col-3 {
+  grid-column: auto/span 3;
+}
+
+.end-3 {
+  grid-column-end: 3;
+}
+
+.col-4 {
+  grid-column: auto/span 4;
+}
+
+.end-4 {
+  grid-column-end: 4;
+}
+
+.col-5 {
+  grid-column: auto/span 5;
+}
+
+.end-5 {
+  grid-column-end: 5;
+}
+
+.col-6 {
+  grid-column: auto/span 6;
+}
+
+.end-6 {
+  grid-column-end: 6;
+}
+
+.col-7 {
+  grid-column: auto/span 7;
+}
+
+.end-7 {
+  grid-column-end: 7;
+}
+
+.col-8 {
+  grid-column: auto/span 8;
+}
+
+.end-8 {
+  grid-column-end: 8;
+}
+
+.col-9 {
+  grid-column: auto/span 9;
+}
+
+.end-9 {
+  grid-column-end: 9;
+}
+
+.col-10 {
+  grid-column: auto/span 10;
+}
+
+.end-10 {
+  grid-column-end: 10;
+}
+
+.col-11 {
+  grid-column: auto/span 11;
+}
+
+.end-11 {
+  grid-column-end: 11;
+}
+
+.col-12 {
+  grid-column: auto/span 12;
+}
+
+.end-12 {
+  grid-column-end: 12;
+}
+
+.col-start-1 {
+  grid-column-start: 1;
+}
+
+.col-start-2 {
+  grid-column-start: 2;
+}
+
+.col-start-3 {
+  grid-column-start: 3;
+}
+
+.col-start-4 {
+  grid-column-start: 4;
+}
+
+.col-start-5 {
+  grid-column-start: 5;
+}
+
+.col-start-6 {
+  grid-column-start: 6;
+}
+
+.col-start-7 {
+  grid-column-start: 7;
+}
+
+.col-start-8 {
+  grid-column-start: 8;
+}
+
+.col-start-9 {
+  grid-column-start: 9;
+}
+
+.col-start-10 {
+  grid-column-start: 10;
+}
+
+.col-start-11 {
+  grid-column-start: 11;
+}
+
+@media (min-width: 576px) {
+  .col-sm-1 {
+    grid-column: auto/span 1;
+  }
+  .end-sm-1 {
+    grid-column-end: 1;
+  }
+  .col-sm-2 {
+    grid-column: auto/span 2;
+  }
+  .end-sm-2 {
+    grid-column-end: 2;
+  }
+  .col-sm-3 {
+    grid-column: auto/span 3;
+  }
+  .end-sm-3 {
+    grid-column-end: 3;
+  }
+  .col-sm-4 {
+    grid-column: auto/span 4;
+  }
+  .end-sm-4 {
+    grid-column-end: 4;
+  }
+  .col-sm-5 {
+    grid-column: auto/span 5;
+  }
+  .end-sm-5 {
+    grid-column-end: 5;
+  }
+  .col-sm-6 {
+    grid-column: auto/span 6;
+  }
+  .end-sm-6 {
+    grid-column-end: 6;
+  }
+  .col-sm-7 {
+    grid-column: auto/span 7;
+  }
+  .end-sm-7 {
+    grid-column-end: 7;
+  }
+  .col-sm-8 {
+    grid-column: auto/span 8;
+  }
+  .end-sm-8 {
+    grid-column-end: 8;
+  }
+  .col-sm-9 {
+    grid-column: auto/span 9;
+  }
+  .end-sm-9 {
+    grid-column-end: 9;
+  }
+  .col-sm-10 {
+    grid-column: auto/span 10;
+  }
+  .end-sm-10 {
+    grid-column-end: 10;
+  }
+  .col-sm-11 {
+    grid-column: auto/span 11;
+  }
+  .end-sm-11 {
+    grid-column-end: 11;
+  }
+  .col-sm-12 {
+    grid-column: auto/span 12;
+  }
+  .end-sm-12 {
+    grid-column-end: 12;
+  }
+  .col-start-sm-1 {
+    grid-column-start: 1;
+  }
+  .col-start-sm-2 {
+    grid-column-start: 2;
+  }
+  .col-start-sm-3 {
+    grid-column-start: 3;
+  }
+  .col-start-sm-4 {
+    grid-column-start: 4;
+  }
+  .col-start-sm-5 {
+    grid-column-start: 5;
+  }
+  .col-start-sm-6 {
+    grid-column-start: 6;
+  }
+  .col-start-sm-7 {
+    grid-column-start: 7;
+  }
+  .col-start-sm-8 {
+    grid-column-start: 8;
+  }
+  .col-start-sm-9 {
+    grid-column-start: 9;
+  }
+  .col-start-sm-10 {
+    grid-column-start: 10;
+  }
+  .col-start-sm-11 {
+    grid-column-start: 11;
+  }
+}
+@media (min-width: 768px) {
+  .col-md-1 {
+    grid-column: auto/span 1;
+  }
+  .end-md-1 {
+    grid-column-end: 1;
+  }
+  .col-md-2 {
+    grid-column: auto/span 2;
+  }
+  .end-md-2 {
+    grid-column-end: 2;
+  }
+  .col-md-3 {
+    grid-column: auto/span 3;
+  }
+  .end-md-3 {
+    grid-column-end: 3;
+  }
+  .col-md-4 {
+    grid-column: auto/span 4;
+  }
+  .end-md-4 {
+    grid-column-end: 4;
+  }
+  .col-md-5 {
+    grid-column: auto/span 5;
+  }
+  .end-md-5 {
+    grid-column-end: 5;
+  }
+  .col-md-6 {
+    grid-column: auto/span 6;
+  }
+  .end-md-6 {
+    grid-column-end: 6;
+  }
+  .col-md-7 {
+    grid-column: auto/span 7;
+  }
+  .end-md-7 {
+    grid-column-end: 7;
+  }
+  .col-md-8 {
+    grid-column: auto/span 8;
+  }
+  .end-md-8 {
+    grid-column-end: 8;
+  }
+  .col-md-9 {
+    grid-column: auto/span 9;
+  }
+  .end-md-9 {
+    grid-column-end: 9;
+  }
+  .col-md-10 {
+    grid-column: auto/span 10;
+  }
+  .end-md-10 {
+    grid-column-end: 10;
+  }
+  .col-md-11 {
+    grid-column: auto/span 11;
+  }
+  .end-md-11 {
+    grid-column-end: 11;
+  }
+  .col-md-12 {
+    grid-column: auto/span 12;
+  }
+  .end-md-12 {
+    grid-column-end: 12;
+  }
+  .col-start-md-1 {
+    grid-column-start: 1;
+  }
+  .col-start-md-2 {
+    grid-column-start: 2;
+  }
+  .col-start-md-3 {
+    grid-column-start: 3;
+  }
+  .col-start-md-4 {
+    grid-column-start: 4;
+  }
+  .col-start-md-5 {
+    grid-column-start: 5;
+  }
+  .col-start-md-6 {
+    grid-column-start: 6;
+  }
+  .col-start-md-7 {
+    grid-column-start: 7;
+  }
+  .col-start-md-8 {
+    grid-column-start: 8;
+  }
+  .col-start-md-9 {
+    grid-column-start: 9;
+  }
+  .col-start-md-10 {
+    grid-column-start: 10;
+  }
+  .col-start-md-11 {
+    grid-column-start: 11;
+  }
+}
+@media (min-width: 992px) {
+  .col-lg-1 {
+    grid-column: auto/span 1;
+  }
+  .end-lg-1 {
+    grid-column-end: 1;
+  }
+  .col-lg-2 {
+    grid-column: auto/span 2;
+  }
+  .end-lg-2 {
+    grid-column-end: 2;
+  }
+  .col-lg-3 {
+    grid-column: auto/span 3;
+  }
+  .end-lg-3 {
+    grid-column-end: 3;
+  }
+  .col-lg-4 {
+    grid-column: auto/span 4;
+  }
+  .end-lg-4 {
+    grid-column-end: 4;
+  }
+  .col-lg-5 {
+    grid-column: auto/span 5;
+  }
+  .end-lg-5 {
+    grid-column-end: 5;
+  }
+  .col-lg-6 {
+    grid-column: auto/span 6;
+  }
+  .end-lg-6 {
+    grid-column-end: 6;
+  }
+  .col-lg-7 {
+    grid-column: auto/span 7;
+  }
+  .end-lg-7 {
+    grid-column-end: 7;
+  }
+  .col-lg-8 {
+    grid-column: auto/span 8;
+  }
+  .end-lg-8 {
+    grid-column-end: 8;
+  }
+  .col-lg-9 {
+    grid-column: auto/span 9;
+  }
+  .end-lg-9 {
+    grid-column-end: 9;
+  }
+  .col-lg-10 {
+    grid-column: auto/span 10;
+  }
+  .end-lg-10 {
+    grid-column-end: 10;
+  }
+  .col-lg-11 {
+    grid-column: auto/span 11;
+  }
+  .end-lg-11 {
+    grid-column-end: 11;
+  }
+  .col-lg-12 {
+    grid-column: auto/span 12;
+  }
+  .end-lg-12 {
+    grid-column-end: 12;
+  }
+  .col-start-lg-1 {
+    grid-column-start: 1;
+  }
+  .col-start-lg-2 {
+    grid-column-start: 2;
+  }
+  .col-start-lg-3 {
+    grid-column-start: 3;
+  }
+  .col-start-lg-4 {
+    grid-column-start: 4;
+  }
+  .col-start-lg-5 {
+    grid-column-start: 5;
+  }
+  .col-start-lg-6 {
+    grid-column-start: 6;
+  }
+  .col-start-lg-7 {
+    grid-column-start: 7;
+  }
+  .col-start-lg-8 {
+    grid-column-start: 8;
+  }
+  .col-start-lg-9 {
+    grid-column-start: 9;
+  }
+  .col-start-lg-10 {
+    grid-column-start: 10;
+  }
+  .col-start-lg-11 {
+    grid-column-start: 11;
+  }
+}
+@media (min-width: 1200px) {
+  .col-xl-1 {
+    grid-column: auto/span 1;
+  }
+  .end-xl-1 {
+    grid-column-end: 1;
+  }
+  .col-xl-2 {
+    grid-column: auto/span 2;
+  }
+  .end-xl-2 {
+    grid-column-end: 2;
+  }
+  .col-xl-3 {
+    grid-column: auto/span 3;
+  }
+  .end-xl-3 {
+    grid-column-end: 3;
+  }
+  .col-xl-4 {
+    grid-column: auto/span 4;
+  }
+  .end-xl-4 {
+    grid-column-end: 4;
+  }
+  .col-xl-5 {
+    grid-column: auto/span 5;
+  }
+  .end-xl-5 {
+    grid-column-end: 5;
+  }
+  .col-xl-6 {
+    grid-column: auto/span 6;
+  }
+  .end-xl-6 {
+    grid-column-end: 6;
+  }
+  .col-xl-7 {
+    grid-column: auto/span 7;
+  }
+  .end-xl-7 {
+    grid-column-end: 7;
+  }
+  .col-xl-8 {
+    grid-column: auto/span 8;
+  }
+  .end-xl-8 {
+    grid-column-end: 8;
+  }
+  .col-xl-9 {
+    grid-column: auto/span 9;
+  }
+  .end-xl-9 {
+    grid-column-end: 9;
+  }
+  .col-xl-10 {
+    grid-column: auto/span 10;
+  }
+  .end-xl-10 {
+    grid-column-end: 10;
+  }
+  .col-xl-11 {
+    grid-column: auto/span 11;
+  }
+  .end-xl-11 {
+    grid-column-end: 11;
+  }
+  .col-xl-12 {
+    grid-column: auto/span 12;
+  }
+  .end-xl-12 {
+    grid-column-end: 12;
+  }
+  .col-start-xl-1 {
+    grid-column-start: 1;
+  }
+  .col-start-xl-2 {
+    grid-column-start: 2;
+  }
+  .col-start-xl-3 {
+    grid-column-start: 3;
+  }
+  .col-start-xl-4 {
+    grid-column-start: 4;
+  }
+  .col-start-xl-5 {
+    grid-column-start: 5;
+  }
+  .col-start-xl-6 {
+    grid-column-start: 6;
+  }
+  .col-start-xl-7 {
+    grid-column-start: 7;
+  }
+  .col-start-xl-8 {
+    grid-column-start: 8;
+  }
+  .col-start-xl-9 {
+    grid-column-start: 9;
+  }
+  .col-start-xl-10 {
+    grid-column-start: 10;
+  }
+  .col-start-xl-11 {
+    grid-column-start: 11;
+  }
+}
+@media (min-width: 1400px) {
+  .col-xxl-1 {
+    grid-column: auto/span 1;
+  }
+  .end-xxl-1 {
+    grid-column-end: 1;
+  }
+  .col-xxl-2 {
+    grid-column: auto/span 2;
+  }
+  .end-xxl-2 {
+    grid-column-end: 2;
+  }
+  .col-xxl-3 {
+    grid-column: auto/span 3;
+  }
+  .end-xxl-3 {
+    grid-column-end: 3;
+  }
+  .col-xxl-4 {
+    grid-column: auto/span 4;
+  }
+  .end-xxl-4 {
+    grid-column-end: 4;
+  }
+  .col-xxl-5 {
+    grid-column: auto/span 5;
+  }
+  .end-xxl-5 {
+    grid-column-end: 5;
+  }
+  .col-xxl-6 {
+    grid-column: auto/span 6;
+  }
+  .end-xxl-6 {
+    grid-column-end: 6;
+  }
+  .col-xxl-7 {
+    grid-column: auto/span 7;
+  }
+  .end-xxl-7 {
+    grid-column-end: 7;
+  }
+  .col-xxl-8 {
+    grid-column: auto/span 8;
+  }
+  .end-xxl-8 {
+    grid-column-end: 8;
+  }
+  .col-xxl-9 {
+    grid-column: auto/span 9;
+  }
+  .end-xxl-9 {
+    grid-column-end: 9;
+  }
+  .col-xxl-10 {
+    grid-column: auto/span 10;
+  }
+  .end-xxl-10 {
+    grid-column-end: 10;
+  }
+  .col-xxl-11 {
+    grid-column: auto/span 11;
+  }
+  .end-xxl-11 {
+    grid-column-end: 11;
+  }
+  .col-xxl-12 {
+    grid-column: auto/span 12;
+  }
+  .end-xxl-12 {
+    grid-column-end: 12;
+  }
+  .col-start-xxl-1 {
+    grid-column-start: 1;
+  }
+  .col-start-xxl-2 {
+    grid-column-start: 2;
+  }
+  .col-start-xxl-3 {
+    grid-column-start: 3;
+  }
+  .col-start-xxl-4 {
+    grid-column-start: 4;
+  }
+  .col-start-xxl-5 {
+    grid-column-start: 5;
+  }
+  .col-start-xxl-6 {
+    grid-column-start: 6;
+  }
+  .col-start-xxl-7 {
+    grid-column-start: 7;
+  }
+  .col-start-xxl-8 {
+    grid-column-start: 8;
+  }
+  .col-start-xxl-9 {
+    grid-column-start: 9;
+  }
+  .col-start-xxl-10 {
+    grid-column-start: 10;
+  }
+  .col-start-xxl-11 {
+    grid-column-start: 11;
+  }
+}
+.grid-cols-subgrid {
+  grid-template-columns: subgrid;
+}
+
+.grid-fill {
+  --bs-gap: 1.5rem;
+  display: grid;
+  grid-auto-flow: row;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  gap: var(--bs-gap);
+}
+
+.g-col-auto {
+  grid-column: auto/auto;
+}
+
+.grid-cols-3 {
+  --bs-columns: 3;
+}
+
+.grid-cols-4 {
+  --bs-columns: 4;
+}
+
+.grid-cols-6 {
+  --bs-columns: 6;
+}
+
+/*# sourceMappingURL=index.css.map */

scss/_config.scss

@@ -0,0 +1,58 @@
+// Configuration
+//
+// Variables and settings not related to theme, components, and more go here. It does include layout.
+
+$prefix: bs- !default;
+
+$enable-container-classes: true !default;
+// more to come here…
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+// scss-docs-start grid-breakpoints
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+) !default;
+// scss-docs-end grid-breakpoints
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 1.5rem !default;
+$grid-row-columns: 6 !default;
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+// scss-docs-start container-max-widths
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px
+) !default;
+// scss-docs-end container-max-widths
+
+$container-padding-x: $grid-gutter-width !default;
+
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+  ("<", "%3c"),
+  (">", "%3e"),
+  ("#", "%23"),
+  ("(", "%28"),
+  (")", "%29"),
+) !default;

scss/_grid.scss

@@ -1,39 +0,0 @@
-// Row
-//
-// Rows contain your columns.
-
-:root {
-  @each $name, $value in $grid-breakpoints {
-    --#{$prefix}breakpoint-#{$name}: #{$value};
-  }
-}
-
-@if $enable-grid-classes {
-  .row {
-    @include make-row();
-
-    > * {
-      @include make-col-ready();
-    }
-  }
-}
-
-@if $enable-cssgrid {
-  .grid {
-    display: grid;
-    grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
-    grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
-    gap: var(--#{$prefix}gap, #{$grid-gutter-width});
-
-    @include make-cssgrid();
-  }
-}
-
-
-// Columns
-//
-// Common styles for small and large grid columns
-
-@if $enable-grid-classes {
-  @include make-grid-columns();
-}

scss/_mixins.scss

@@ -9,7 +9,7 @@
 @import "mixins/deprecate";
 
 // Helpers
-@import "mixins/breakpoints";
+// @import "mixins/breakpoints";
 @import "mixins/color-mode";
 @import "mixins/color-scheme";
 @import "mixins/image";
@@ -38,5 +38,5 @@
 
 // Layout
 @import "mixins/clearfix";
-@import "mixins/container";
+// @import "mixins/container";
-@import "mixins/grid";
+// @import "mixins/grid";

scss/_variables.scss

@@ -389,8 +389,8 @@ $color-mode-type:             data !default; // `data` or `media-query`
 
 // Prefix for :root CSS variables
 
-$variable-prefix:             bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
+// $variable-prefix:             bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
-$prefix:                      $variable-prefix !default;
+// $prefix:                      $variable-prefix !default;
 
 // Gradient
 //
@@ -475,54 +475,54 @@ $icon-link-icon-transform:    translate3d(.25em, 0, 0) !default;
 $paragraph-margin-bottom:   1rem !default;
 
 
-// Grid breakpoints
+// // Grid breakpoints
-//
+// //
-// Define the minimum dimensions at which your layout will change,
+// // Define the minimum dimensions at which your layout will change,
-// adapting to different screen sizes, for use in media queries.
+// // adapting to different screen sizes, for use in media queries.
 
-// scss-docs-start grid-breakpoints
+// // scss-docs-start grid-breakpoints
-$grid-breakpoints: (
+// $grid-breakpoints: (
-  xs: 0,
+//   xs: 0,
-  sm: 576px,
+//   sm: 576px,
-  md: 768px,
+//   md: 768px,
-  lg: 992px,
+//   lg: 992px,
-  xl: 1200px,
+//   xl: 1200px,
-  xxl: 1400px
+//   xxl: 1400px
-) !default;
+// ) !default;
-// scss-docs-end grid-breakpoints
+// // scss-docs-end grid-breakpoints
 
-@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
+// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
 
 
-// Grid containers
+// // Grid containers
-//
+// //
-// Define the maximum width of `.container` for different screen sizes.
+// // Define the maximum width of `.container` for different screen sizes.
 
-// scss-docs-start container-max-widths
+// // scss-docs-start container-max-widths
-$container-max-widths: (
+// $container-max-widths: (
-  sm: 540px,
+//   sm: 540px,
-  md: 720px,
+//   md: 720px,
-  lg: 960px,
+//   lg: 960px,
-  xl: 1140px,
+//   xl: 1140px,
-  xxl: 1320px
+//   xxl: 1320px
-) !default;
+// ) !default;
-// scss-docs-end container-max-widths
+// // scss-docs-end container-max-widths
 
-@include _assert-ascending($container-max-widths, "$container-max-widths");
+// @include _assert-ascending($container-max-widths, "$container-max-widths");
 
 
-// Grid columns
+// // Grid columns
-//
+// //
-// Set the number of columns and specify the width of the gutters.
+// // Set the number of columns and specify the width of the gutters.
 
-$grid-columns:                12 !default;
+// $grid-columns:                12 !default;
-$grid-gutter-width:           1.5rem !default;
+// $grid-gutter-width:           1.5rem !default;
-$grid-row-columns:            6 !default;
+// $grid-row-columns:            6 !default;
 
-// Container padding
+// // Container padding
 
-$container-padding-x: $grid-gutter-width !default;
+// $container-padding-x: $grid-gutter-width !default;
 
 
 // Components

scss/bootstrap.scss

@@ -1,9 +1,11 @@
-@import "mixins/banner";
+// @import "mixins/banner";
-@include bsBanner("");
+// @include bsBanner("");
 
 
 // scss-docs-start import-stack
 // Configuration
+@use "config" as *;
+
 @import "functions";
 @import "colors";
 @import "variables";
@@ -17,8 +19,9 @@
 @import "reboot";
 @import "type";
 @import "images";
-@import "containers";
+// @import "containers";
-@import "grid";
+// @import "grid";
+@import "layout";
 @import "tables";
 @import "forms";
 @import "buttons";

scss/layout/_containers.scss

@@ -1,6 +1,20 @@
+@use "../config" as *;
+@use "breakpoints" as *;
+
 // Container widths
 //
 // Set the container width, and override it for fixed navbars in media queries.
+// Container mixins
+
+@mixin make-container($gutter: $container-padding-x) {
+  --#{$prefix}gutter-x: #{$gutter};
+  --#{$prefix}gutter-y: 0;
+  width: 100%;
+  padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  margin-right: auto;
+  margin-left: auto;
+}
 
 @if $enable-container-classes {
   // Single container class with breakpoint max-widths

scss/layout/_grid.scss

@@ -0,0 +1,83 @@
+@use "sass:map";
+@use "../config" as *;
+@use "breakpoints" as *;
+
+// mdo-do
+// - check gap utilities as replacement for gutter classes from v5
+
+// Row
+//
+// Rows contain your columns.
+
+:root {
+  @each $name, $value in $grid-breakpoints {
+    --#{$prefix}breakpoint-#{$name}: #{$value};
+  }
+}
+
+.grid {
+  --#{$prefix}columns: #{$grid-columns};
+  --#{$prefix}rows: 1;
+  --#{$prefix}gap: #{$grid-gutter-width};
+
+  display: grid;
+  grid-template-rows: repeat(var(--#{$prefix}rows), 1fr);
+  grid-template-columns: repeat(var(--#{$prefix}columns), 1fr);
+  gap: var(--#{$prefix}gap);
+}
+
+@each $breakpoint in map.keys($grid-breakpoints) {
+  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+  @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+    @if $grid-columns > 0 {
+      @for $i from 1 through $grid-columns {
+        .col#{$infix}-#{$i} {
+          grid-column: auto / span $i;
+        }
+
+        .end#{$infix}-#{$i} {
+          grid-column-end: $i;
+        }
+      }
+
+      // Start with `1` because `0` is an invalid value.
+      // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+      @for $i from 1 through ($grid-columns - 1) {
+        .col-start#{$infix}-#{$i} {
+          grid-column-start: $i;
+        }
+      }
+    }
+  }
+}
+
+// mdo-do: add to utilities?
+.grid-cols-subgrid {
+  grid-template-columns: subgrid;
+}
+
+.grid-fill {
+  --#{$prefix}gap: #{$grid-gutter-width};
+
+  display: grid;
+  grid-auto-flow: row;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  gap: var(--#{$prefix}gap);
+}
+
+// mdo-do: add to utilities?
+.g-col-auto {
+  grid-column: auto/auto;
+}
+
+// mdo-do: add to utilities?
+.grid-cols-3 {
+  --#{$prefix}columns: 3;
+}
+.grid-cols-4 {
+  --#{$prefix}columns: 4;
+}
+.grid-cols-6 {
+  --#{$prefix}columns: 6;
+}

scss/layout/index.scss

@@ -0,0 +1,3 @@
+@import "breakpoints";
+@import "containers";
+@import "grid";

scss/mixins/_container.scss

@@ -1,11 +0,0 @@
-// Container mixins
-
-@mixin make-container($gutter: $container-padding-x) {
-  --#{$prefix}gutter-x: #{$gutter};
-  --#{$prefix}gutter-y: 0;
-  width: 100%;
-  padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  margin-right: auto;
-  margin-left: auto;
-}

scss/mixins/_grid.scss

@@ -1,151 +0,0 @@
-// Grid system
-//
-// Generate semantic grid columns with these mixins.
-
-@mixin make-row($gutter: $grid-gutter-width) {
-  --#{$prefix}gutter-x: #{$gutter};
-  --#{$prefix}gutter-y: 0;
-  display: flex;
-  flex-wrap: wrap;
-  // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
-  margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
-  margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
-}
-
-@mixin make-col-ready() {
-  // Add box sizing if only the grid is loaded
-  box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
-  // Prevent columns from becoming too narrow when at smaller grid tiers by
-  // always setting `width: 100%;`. This works because we set the width
-  // later on to override this initial width.
-  flex-shrink: 0;
-  width: 100%;
-  max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  margin-top: var(--#{$prefix}gutter-y);
-}
-
-@mixin make-col($size: false, $columns: $grid-columns) {
-  @if $size {
-    flex: 0 0 auto;
-    width: percentage(divide($size, $columns));
-
-  } @else {
-    flex: 1 1 0;
-    max-width: 100%;
-  }
-}
-
-@mixin make-col-auto() {
-  flex: 0 0 auto;
-  width: auto;
-}
-
-@mixin make-col-offset($size, $columns: $grid-columns) {
-  $num: divide($size, $columns);
-  margin-left: if($num == 0, 0, percentage($num));
-}
-
-// Row columns
-//
-// Specify on a parent element(e.g., .row) to force immediate children into NN
-// number of columns. Supports wrapping to new lines, but does not do a Masonry
-// style grid.
-@mixin row-cols($count) {
-  > * {
-    flex: 0 0 auto;
-    width: percentage(divide(1, $count));
-  }
-}
-
-// Framework grid generation
-//
-// Used only by Bootstrap to generate the correct number of grid classes given
-// any value of `$grid-columns`.
-
-@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint in map-keys($breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
-      .col#{$infix} {
-        flex: 1 0 0;
-      }
-
-      .row-cols#{$infix}-auto > * {
-        @include make-col-auto();
-      }
-
-      @if $grid-row-columns > 0 {
-        @for $i from 1 through $grid-row-columns {
-          .row-cols#{$infix}-#{$i} {
-            @include row-cols($i);
-          }
-        }
-      }
-
-      .col#{$infix}-auto {
-        @include make-col-auto();
-      }
-
-      @if $columns > 0 {
-        @for $i from 1 through $columns {
-          .col#{$infix}-#{$i} {
-            @include make-col($i, $columns);
-          }
-        }
-
-        // `$columns - 1` because offsetting by the width of an entire row isn't possible
-        @for $i from 0 through ($columns - 1) {
-          @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
-            .offset#{$infix}-#{$i} {
-              @include make-col-offset($i, $columns);
-            }
-          }
-        }
-      }
-
-      // Gutters
-      //
-      // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
-      @each $key, $value in $gutters {
-        .g#{$infix}-#{$key},
-        .gx#{$infix}-#{$key} {
-          --#{$prefix}gutter-x: #{$value};
-        }
-
-        .g#{$infix}-#{$key},
-        .gy#{$infix}-#{$key} {
-          --#{$prefix}gutter-y: #{$value};
-        }
-      }
-    }
-  }
-}
-
-@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint in map-keys($breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      @if $columns > 0 {
-        @for $i from 1 through $columns {
-          .g-col#{$infix}-#{$i} {
-            grid-column: auto / span $i;
-          }
-        }
-
-        // Start with `1` because `0` is an invalid value.
-        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
-        @for $i from 1 through ($columns - 1) {
-          .g-start#{$infix}-#{$i} {
-            grid-column-start: $i;
-          }
-        }
-      }
-    }
-  }
-}