Add breakpoint containers

sass/elements/other.sass

@@ -2,22 +2,29 @@
   +block
 
 .container
+  margin: 0 auto
+  max-width: $desktop - (2 * $gap)
   position: relative
-  +desktop
-    margin: 0 auto
-    max-width: $desktop - 40px
-    width: $desktop - 40px
-    // Modifiers
-    &.is-fluid
-      margin: 0 20px
-      max-width: none
+  width: $desktop - (2 * $gap)
+  &.is-fluid
+    margin-left: $gap
+    margin-right: $gap
+    max-width: none
+    width: auto
+  +until($widescreen)
+    &.is-widescreen
+      max-width: $widescreen - (2 * $gap)
+      width: auto
+  +until($fullhd)
+    &.is-fullhd
+      max-width: $fullhd - (2 * $gap)
       width: auto
   +widescreen
-    max-width: $widescreen - 40px
-    width: $widescreen - 40px
+    max-width: $widescreen - (2 * $gap)
+    width: $widescreen - (2 * $gap)
   +fullhd
-    max-width: $fullhd - 40px
-    width: $fullhd - 40px
+    max-width: $fullhd - (2 * $gap)
+    width: $fullhd - (2 * $gap)
 
 .delete
   +delete

sass/layout/section.sass

@@ -1,6 +1,5 @@
 .section
   background-color: $white
-  min-height: 100vh
   padding: 3rem 1.5rem
   // Responsiveness
   +desktop

sass/utilities/initial-variables.sass

@@ -48,14 +48,16 @@ $body-size: 16px !default
 
 // Responsiveness
 
+// The container gap, which acts as the offset for breakpoints
+$gap: 24px !default
 // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
 $tablet: 769px !default
-// 960px container + 40px
-$desktop: 1000px !default
-// 1152px container + 40
-$widescreen: 1192px !default
-// 1344px container + 40
-$fullhd: 1384px !default
+// 960px container + 3rem
+$desktop: 960px + (2 * $gap) !default
+// 1152px container + 3rem
+$widescreen: 1152px + (2 * $gap)  !default
+// 1344px container + 3rem
+$fullhd: 1344px + (2 * $gap)  !default
 
 // Miscellaneous