diff --git a/assets/css/custom.css b/assets/css/custom.css
index cbafb158a..9b8a63f7f 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -257,28 +257,76 @@ a.broken {
   padding: 0.1em 0.2em;
 }
 
-/* -----------------------------------------------
-Fix card vertical aligning
-See https://github.com/medic/cht-docs/pull/2152#issuecomment-4092760195
---------------------------------------------------*/
-.hextra-cards>a>div.hx\:mt-auto {
-    margin-top: unset;
-}
-
-/* -----------------------------------------------
-Fix content too tight around video HTML tags
---------------------------------------------------*/
-video {
-    padding-top: 25px;
+/* Legacy Bootstrap grid classes used in figure shortcodes */
+figure.right {
+    float: right;
+    margin-left: 1.5rem;
+    margin-bottom: 1rem;
 }
-
-/* -----------------------------------------------
-Fix Resolve conflict between Hextra's 48rem and Tailwind's 768px breakpoints
---------------------------------------------------*/
+figure.left {
+    float: left;
+    margin-right: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.col-1 { width: 8.333333%; }
+.col-2 { width: 16.666667%; }
+.col-3 { width: 25%; }
+.col-4 { width: 33.333333%; }
+.col-5 { width: 41.666667%; }
+.col-6 { width: 50%; }
+.col-7 { width: 58.333333%; }
+.col-8 { width: 66.666667%; }
+.col-9 { width: 75%; }
+.col-10 { width: 83.333333%; }
+.col-11 { width: 91.666667%; }
+.col-12 { width: 100%; }
+.col-16 { width: 100%; }
+
+/* sm breakpoint: 576px */
+@media (min-width: 576px) {
+    .col-sm-1 { width: 8.333333%; }
+    .col-sm-2 { width: 16.666667%; }
+    .col-sm-3 { width: 25%; }
+    .col-sm-4 { width: 33.333333%; }
+    .col-sm-5 { width: 41.666667%; }
+    .col-sm-6 { width: 50%; }
+    .col-sm-7 { width: 58.333333%; }
+    .col-sm-8 { width: 66.666667%; }
+    .col-sm-9 { width: 75%; }
+    .col-sm-10 { width: 83.333333%; }
+    .col-sm-11 { width: 91.666667%; }
+    .col-sm-12 { width: 100%; }
+}
+
+/* md breakpoint: 768px */
 @media (min-width: 768px) {
-  aside.hextra-sidebar-container {
-    position: sticky !important;
-    width: 16rem !important; 
-    transform: none !important; 
-  }
+    .col-md-1 { width: 8.333333%; }
+    .col-md-2 { width: 16.666667%; }
+    .col-md-3 { width: 25%; }
+    .col-md-4 { width: 33.333333%; }
+    .col-md-5 { width: 41.666667%; }
+    .col-md-6 { width: 50%; }
+    .col-md-7 { width: 58.333333%; }
+    .col-md-8 { width: 66.666667%; }
+    .col-md-9 { width: 75%; }
+    .col-md-10 { width: 83.333333%; }
+    .col-md-11 { width: 91.666667%; }
+    .col-md-12 { width: 100%; }
+}
+
+/* lg breakpoint: 1024px */
+@media (min-width: 1024px) {
+    .col-lg-1 { width: 8.333333%; }
+    .col-lg-2 { width: 16.666667%; }
+    .col-lg-3 { width: 25%; }
+    .col-lg-4 { width: 33.333333%; }
+    .col-lg-5 { width: 41.666667%; }
+    .col-lg-6 { width: 50%; }
+    .col-lg-7 { width: 58.333333%; }
+    .col-lg-8 { width: 66.666667%; }
+    .col-lg-9 { width: 75%; }
+    .col-lg-10 { width: 83.333333%; }
+    .col-lg-11 { width: 91.666667%; }
+    .col-lg-12 { width: 100%; }
 }