Add grid container coupling

src/definitions/elements/container.less

@@ -36,6 +36,9 @@
     margin-left: @mobileGutter !important;
     margin-right: @mobileGutter !important;
   }
+  .ui.grid.container {
+    width: @mobileGridWidth;
+  }
 }
 @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
   .ui.container {
@@ -43,19 +46,28 @@
     margin-left: @tabletGutter !important;
     margin-right: @tabletGutter !important;
   }
+  .ui.grid.container {
+    width: @tabletGridWidth;
+  }
 }
-@media only screen and (min-width: @smallComputerBreakpoint) and (max-width: @largeMonitorBreakpoint) {
+@media only screen and (min-width: @smallMonitorBreakpoint) and (max-width: @largeMonitorBreakpoint) {
   .ui.container {
-    width: @smallComputerWidth;
-    margin-left: @smallComputerGutter !important;
-    margin-right: @smallComputerGutter !important;
+    width: @smallMonitorWidth;
+    margin-left: @smallMonitorGutter !important;
+    margin-right: @smallMonitorGutter !important;
+  }
+  .ui.grid.container {
+    width: @smallMonitorGridWidth;
   }
 }
 @media only screen and (min-width: @largeMonitorBreakpoint) {
   .ui.container {
-    width: @largeMWidth;
-    margin-left: @largeMGutter !important;
-    margin-right: @largeMGutter !important;
+    width: @largeMonitorWidth;
+    margin-left: @largeMonitorGutter !important;
+    margin-right: @largeMonitorGutter !important;
+  }
+  .ui.grid.container {
+    width: @largeMonitorGridWidth;
   }
 }
 

src/themes/default/collections/grid.variables

@@ -37,7 +37,7 @@
 
 @tabletWidth: auto;
 @tabletMargin: 0em;
-@tabletGutter: 8%;
+@tabletGutter: 2em;
 
 @computerWidth: auto;
 @computerMargin: 0em;
@@ -51,7 +51,6 @@
 @widescreenMargin: 0em;
 @widescreenMonitorGutter: 23%;
 
-
 /*--------------
      Relaxed
 ---------------*/

src/themes/default/elements/container.variables

@@ -21,11 +21,16 @@
 @smallMonitorWidth: 960px;
 @smallMonitorGutter: auto;
 
-@largeMonitorWidth: 1120px;
-@largeMonitorBreakpoint: 1148px;
+@largeMonitorWidth: 1200px;
+@largeMonitorBreakpoint: 1228px;
 @largeMonitorGutter: auto;
 
-/* Adjust breakpoints to match fixed width */
+/* Coupling (Add Negative Margin to container size) */
+@gridGutterWidth: 2em;
+@mobileGridWidth: @mobileWidth;
+@tabletGridWidth: ~"calc("@tabletWidth~" + "@gridGutterWidth~")";
+@smallMonitorGridWidth: ~"calc("@smallMonitorWidth~" + "@gridGutterWidth~")";
+@largeMonitorGridWidth: ~"calc("@largeMonitorWidth~" + "@gridGutterWidth~")";
 
 /*-------------------
        Types