Make columns shortcode mobile friendly

assets/_shortcodes.scss

@@ -62,15 +62,14 @@
 
 // {{< columns >}}
 .book-columns {
-  margin-top: $padding-16;
-  margin-bottom: $padding-16;
-}
-.book-columns > {
-  div {
-    max-width: 50%;
-  }
-  div + div {
-    margin-left: $padding-16 * 2;
+  margin-left: -$padding-16;
+  margin-right: -$padding-16;
+
+  > div {
+    margin: $padding-16 0;
+    // max-width: 50%;
+    min-width: $body-min-width * 0.66;
+    padding: 0 $padding-16;
   }
 }
 

assets/_utils.scss

@@ -10,6 +10,10 @@
   flex: 1 1;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .justify-start {
   justify-content: flex-start;
 }

assets/_variables.scss

@@ -35,7 +35,7 @@ $container-max-width: 80rem;
 
 $header-height: 3.5rem;
 $menu-width: 16rem;
-$toc-width: 14rem;
+$toc-width: 16rem;
 
 $sm-breakpoint: $menu-width + $body-min-width + 5;
 $md-breakpoint: $sm-breakpoint + $toc-width;