Update to the latest bootstrap and adjust the breakpoints and container-max-widths to reflect

package-lock.json

@@ -1414,9 +1414,9 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
     "bootstrap": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
-      "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz",
+      "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA=="
     },
     "brace-expansion": {
       "version": "1.1.11",

package.json

@@ -13,7 +13,7 @@
     "@fortawesome/fontawesome-free": "^5.12.1",
     "autoprefixer": "^9.7.4",
     "babelify": "^10.0.0",
-    "bootstrap": "4.3.1",
+    "bootstrap": "4.4.1",
     "browserify": "^16.5.0",
     "easymde": "^2.9.0",
     "fancy-log": "^1.3.3",

resources/sass/_var.scss

@@ -9,15 +9,19 @@ $grid-breakpoints: (
     md: 768px,
     lg: 992px,
     xl: 1200px,
-    xxl: 1600px
+    xxl: 1600px,
+    xxxl: 1950px,
+    xxxxl: 2150px
 );
 
 $container-max-widths: (
-    sm: pxrem(540),
-    md: pxrem(720),
-    lg: pxrem(960),
-    xl: pxrem(1140),
-    xxl: pxrem(1540)
+    sm: 540px,
+    md: 720px,
+    lg: 960px,
+    xl: 1140px,
+    xxl: 1540px,
+    xxxl: 1733px,
+    xxxxl: 1925px
 );
 
 // Colours

resources/sass/app.scss

@@ -38,6 +38,14 @@ html {
     width: 100%;
     font-size: $base-font-size;
 
+    @include media-breakpoint-up(xxxl) {
+        font-size: 18px;
+    }
+
+    @include media-breakpoint-up(xxxxl) {
+        font-size: 20px;
+    }
+
     &.no-scroll {
         overflow-y: hidden;
     }