From aa56efe5492b8f9e22fb889e0ab73eeafa480c10 Mon Sep 17 00:00:00 2001
From: John Ashenden <jaashenden@gmail.com>
Date: Fri, 2 Feb 2018 16:21:54 -0800
Subject: [PATCH] Update container vars and view breakpoints

---
 styles/layout/container/variables.less |  8 ++++----
 styles/layout/grid/variables.less      | 18 +++++++++---------
 styles/layout/variables.less           | 26 +++++++++++++-------------
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/styles/layout/container/variables.less b/styles/layout/container/variables.less
index 439fc912..5f4221b5 100644
--- a/styles/layout/container/variables.less
+++ b/styles/layout/container/variables.less
@@ -16,10 +16,10 @@
 // Container Width
 
 @container-width: 100%;
-@container-width-screen-small: null;
-@container-width-screen-medium: 730px;
-@container-width-screen-large: 920px;
-@container-width-screen-jumbo: 1100px;
+@container-width-screen-small: 552px;
+@container-width-screen-medium: 804px;
+@container-width-screen-large: 1000px;
+@container-width-screen-jumbo: 1280px;
 
 /* Margin */
 
diff --git a/styles/layout/grid/variables.less b/styles/layout/grid/variables.less
index 97ba0d46..26f4718e 100644
--- a/styles/layout/grid/variables.less
+++ b/styles/layout/grid/variables.less
@@ -17,11 +17,11 @@
 
 // Gutter Width
 
-@grid-gutter-width: 24px;
+@grid-gutter-width: 16px;
 @grid-gutter-width-screen-small: 24px;
 @grid-gutter-width-screen-medium: 24px;
-@grid-gutter-width-screen-large: 24px;
-@grid-gutter-width-screen-jumbo: 32px;
+@grid-gutter-width-screen-large: 32px;
+@grid-gutter-width-screen-jumbo: 40px;
 
 /* Layout Variants */
 
@@ -35,16 +35,16 @@
 
 // Narrow
 
-@grid-narrow-gutter-width: 12px;
+@grid-narrow-gutter-width: 8px;
 @grid-narrow-gutter-width-screen-small: 12px;
 @grid-narrow-gutter-width-screen-medium: 12px;
-@grid-narrow-gutter-width-screen-large: 12px;
-@grid-narrow-gutter-width-screen-jumbo: 16px;
+@grid-narrow-gutter-width-screen-large: 16px;
+@grid-narrow-gutter-width-screen-jumbo: 20px;
 
 // Wide
 
-@grid-wide-gutter-width: 48px;
+@grid-wide-gutter-width: 32px;
 @grid-wide-gutter-width-screen-small: 48px;
 @grid-wide-gutter-width-screen-medium: 48px;
-@grid-wide-gutter-width-screen-large: 48px;
-@grid-wide-gutter-width-screen-jumbo: 64px;
+@grid-wide-gutter-width-screen-large: 64px;
+@grid-wide-gutter-width-screen-jumbo: 80px;
diff --git a/styles/layout/variables.less b/styles/layout/variables.less
index 3772f68a..b53e3b01 100644
--- a/styles/layout/variables.less
+++ b/styles/layout/variables.less
@@ -11,20 +11,20 @@
  * Layout Breakpoints
  */
 
-// Small
-@layout-screen-small-min-width: 480px;
-@layout-screen-small-max-width: 767px;
+// Small (Tablet Portrait)
+@layout-screen-small-min-width: 600px;
+@layout-screen-small-max-width: 899px;
 
-// Medium
-@layout-screen-medium-min-width: 768px;
-@layout-screen-medium-max-width: 991px;
+// Medium (Tablet Landscape & Small Laptops)
+@layout-screen-medium-min-width: 900px;
+@layout-screen-medium-max-width: 1199px;
 
-// Large
-@layout-screen-large-min-width: 992px;
-@layout-screen-large-max-width: 1399px;
+// Large (Laptops)
+@layout-screen-large-min-width: 1200px;
+@layout-screen-large-max-width: 1799px;
 
-// Small
-@layout-screen-jumbo-min-width: 1400px;
+// Jumbo (Wide Monitors)
+@layout-screen-jumbo-min-width: 1800px;
 @layout-screen-jumbo-max-width: null;
 
 /*
@@ -34,8 +34,8 @@
 @base-spacing-unit: 24px;
 @base-spacing-unit-screen-small: 24px;
 @base-spacing-unit-screen-medium: 24px;
-@base-spacing-unit-screen-large: 24px;
-@base-spacing-unit-screen-jumbo: 32px;
+@base-spacing-unit-screen-large: 32px;
+@base-spacing-unit-screen-jumbo: 40px;
 
 /*
  * Z-Index