diff --git a/src/_frameless.scss b/src/_frameless.scss
index d0ff4626b..0881a3ec6 100644
--- a/src/_frameless.scss
+++ b/src/_frameless.scss
@@ -55,6 +55,8 @@ $big: "only screen and (min-width : #{$desktop})";
 $medium-and-smaller: "only screen and (max-width : #{$tablet}-1)";
 $intermediate-and-smaller: "only screen and (max-width : #{$desktop}-1)";
 
+$medium-and-intermediate: "only screen and (min-width : #{$mobile}) and (max-width : #{$desktop}-1)";
+
 /* Height */
 
 $small-height: "only screen and (max-height : #{$mobile} - 1)";
@@ -71,7 +73,7 @@ $medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$
 
 //4 columns
 @mixin submobile ($parent-selector, $child-selector) {
-    @media only screen and (max-width: $mobile - 1) {
+    @media #{$small} {
         #{$parent-selector} {
             text-align: center;
         }
@@ -87,7 +89,7 @@ $medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$
 
 //6 columns
 @mixin mobile ($parent-selector, $child-selector) {
-    @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    @media #{$medium} {
         #{$parent-selector} {
             text-align: center;
         }
@@ -103,7 +105,7 @@ $medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$
 
 //8 columns
 @mixin tablet ($parent-selector, $child-selector) {
-    @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    @media #{$intermediate} {
         #{$parent-selector} {
             text-align: center;
         }
@@ -117,7 +119,7 @@ $medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$
 
 //12 columns
 @mixin desktop ($parent-selector, $child-selector) {
-    @media only screen and (min-width: $desktop) {
+    @media #{$big} {
         #{$child-selector} {
             margin: 0 auto;
             width: $desktop;
diff --git a/src/components/box/box.scss b/src/components/box/box.scss
index 4b9392771..bc981dd94 100644
--- a/src/components/box/box.scss
+++ b/src/components/box/box.scss
@@ -7,9 +7,9 @@ $base-bg: $ui-white;
     display: inline-block;
     border: 1px solid $ui-border;
     border-radius: 10px 10px 0 0;
-    
+
     //4 columns
-    @media only screen and (max-width: $mobile - 1) {
+    @media #{$small} {
         width: $cols4;
 
         .box-header {
@@ -22,7 +22,7 @@ $base-bg: $ui-white;
     }
 
     //6 columns
-    @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    @media #{$medium} {
         width: $cols6;
 
         .box-header {
@@ -35,7 +35,7 @@ $base-bg: $ui-white;
     }
 
     //8 columns
-    @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    @media #{$intermediate} {
         width: $cols8;
 
         .box-header {
@@ -48,7 +48,7 @@ $base-bg: $ui-white;
     }
 
     //12 columns
-    @media only screen and (min-width: $desktop) {
+    @media #{$big} {
         width: $cols12;
 
         .box-header {
diff --git a/src/components/card/card.scss b/src/components/card/card.scss
index b2b70c22c..d23f5f2e3 100644
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@@ -65,7 +65,7 @@
             margin: 0 0 -3rem -4rem;
         }
 
-        .row {        
+        .row {
             margin-bottom: 1.2rem;
 
             &.has-error {
@@ -81,7 +81,7 @@
     }
 }
 
-@media only screen and (max-width: $mobile - 1) {
+@media #{$small} {
     .card {
         width: 22.5rem;
 
@@ -95,7 +95,7 @@
     }
 }
 
-@media only screen and (max-width: $tablet - 1) {
+@media #{$medium-and-smaller} {
     .card {
         .input {
             width: 90%;
@@ -103,7 +103,7 @@
     }
 }
 
-@media only screen and (max-width: $desktop - 1) {
+@media #{$intermediate-and-smaller} {
     .card {
         .validation-message {
             position: relative;
diff --git a/src/components/flex-row/flex-row.scss b/src/components/flex-row/flex-row.scss
index 4b0f28069..eff8370e3 100644
--- a/src/components/flex-row/flex-row.scss
+++ b/src/components/flex-row/flex-row.scss
@@ -25,7 +25,7 @@
         }
     }
 
-    @media only screen and (max-width: $tablet - 1) {
+    @media #{$medium-and-smaller} {
         flex-direction: column;
 
         &.uneven {
diff --git a/src/components/footer/conference/footer.scss b/src/components/footer/conference/footer.scss
index 3694c2d87..3eafcc4cb 100644
--- a/src/components/footer/conference/footer.scss
+++ b/src/components/footer/conference/footer.scss
@@ -51,7 +51,7 @@
             justify-content: space-between;
             align-items: flex-start;
 
-            @media only screen and (max-width: $tablet - 1) {
+            @media #{$medium-and-smaller} {
                 align-items: center;
             }
         }
@@ -103,7 +103,7 @@
             }
         }
 
-        @media only screen and (max-width: $tablet - 1) {
+        @media #{$medium-and-smaller} {
             text-align: center;
 
             .family {
@@ -122,7 +122,7 @@
             }
         }
 
-        @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+        @media #{$intermediate} {
             ul {
                 li {
                     margin-left: 0;
diff --git a/src/components/grid/grid.scss b/src/components/grid/grid.scss
index 253210619..3cd926af2 100644
--- a/src/components/grid/grid.scss
+++ b/src/components/grid/grid.scss
@@ -7,7 +7,7 @@
 
     $thumbnail-width: 220px;
     $thumbnail-inner-width: 204px;
-    
+
     $project-height: 208px;
     $gallery-height: 164px;
 
@@ -94,21 +94,21 @@
     }
 
     //4 columns
-    @media only screen and (max-width: $mobile - 1) {
+    @media #{$small} {
         .flex-row {
             width: $cols4;
         }
     }
 
     //6 columns
-    @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    @media #{$medium} {
         .flex-row {
             width: $cols6;
         }
     }
 
     // 8 columns
-    @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    @media #{$intermediate} {
         .flex-row {
             width: $cols9;
         }
diff --git a/src/components/masonrygrid/masonrygrid.scss b/src/components/masonrygrid/masonrygrid.scss
index 867f33350..98b75c95f 100644
--- a/src/components/masonrygrid/masonrygrid.scss
+++ b/src/components/masonrygrid/masonrygrid.scss
@@ -9,14 +9,14 @@
 
 // column-count required for Firefox, IE and Edge
 //4 columns
-@media only screen and (max-width: $mobile - 1) {
+@media #{$small} {
     .masonry {
         column-count: 1;
     }
 }
 
 //6 columns
-@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+@media #{$medium} {
     .masonry {
         column-count: 1;
     }
@@ -24,14 +24,14 @@
 
 
 //8 columns
-@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+@media #{$intermediate} {
     .masonry {
         column-count: 2;
     }
 }
 
 // 12 columns
-@media only screen and (min-width: $desktop) {
+@media #{$big} {
     .masonry {
         column-count: 3;
     }
diff --git a/src/components/modal/ttt/modal.scss b/src/components/modal/ttt/modal.scss
index 1604eca7b..b152e9025 100644
--- a/src/components/modal/ttt/modal.scss
+++ b/src/components/modal/ttt/modal.scss
@@ -62,7 +62,7 @@
     box-shadow: none;
 }
 
-@media only screen and (max-width: $mobile - 1) {
+@media #{$small} {
     .modal-content.mod-ttt {
         overflow: scroll;
     }
@@ -76,7 +76,7 @@
     }
 }
 
-@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+@media #{$medium} {
     .modal-content.mod-ttt {
         overflow: scroll;
     }
@@ -90,7 +90,7 @@
     }
 }
 
-@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+@media #{$intermediate} {
     .modal-content.mod-ttt {
         overflow: scroll;
     }
diff --git a/src/components/navigation/conference/2016/navigation.scss b/src/components/navigation/conference/2016/navigation.scss
index bc1536c16..13c74c539 100644
--- a/src/components/navigation/conference/2016/navigation.scss
+++ b/src/components/navigation/conference/2016/navigation.scss
@@ -40,7 +40,7 @@
         font-weight: bold;
     }
 
-    @media only screen and (max-width: $mobile - 1) {
+    @media #{$small} {
         .li-right-ul.mod-2016 {
             flex-flow: row nowrap;
         }
@@ -55,7 +55,7 @@
         }
     }
 
-    @media only screen and (max-width: $tablet - 1) {
+    @media #{$medium-and-smaller} {
         height: 100px;
 
         .ul.mod-2016 {
diff --git a/src/components/navigation/conference/2018/navigation.scss b/src/components/navigation/conference/2018/navigation.scss
index 7651d846f..6e36aaab6 100644
--- a/src/components/navigation/conference/2018/navigation.scss
+++ b/src/components/navigation/conference/2018/navigation.scss
@@ -11,7 +11,7 @@
         align-items: center;
         list-style-type: none;
     }
-    
+
     .li-left-ul.mod-2018 {
         padding-left: 0;
     }
@@ -45,7 +45,7 @@
         font-weight: bold;
     }
 
-    @media only screen and (max-width: $mobile - 1) {
+    @media #{$small} {
         .li-right-ul.mod-2018 {
             flex-flow: row nowrap;
         }
@@ -60,7 +60,7 @@
         }
     }
 
-    @media only screen and (max-width: $tablet - 1) {
+    @media #{$medium-and-smaller} {
         height: 100px;
 
         .ul.mod-2018 {
diff --git a/src/components/navigation/www/accountnav.scss b/src/components/navigation/www/accountnav.scss
index ebee28122..e4bc29710 100644
--- a/src/components/navigation/www/accountnav.scss
+++ b/src/components/navigation/www/accountnav.scss
@@ -56,7 +56,7 @@
 }
 
 //4 columns
-@media only screen and (max-width: $mobile - 1) {
+@media #{$small} {
     .account-nav {
         margin-left: 0;
 
@@ -74,7 +74,7 @@
 
 
 //6 columns
-@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+@media #{$medium} {
     .account-nav {
         margin-left: 0;
 
@@ -91,7 +91,7 @@
 }
 
 //8 columns
-@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+@media #{$intermediate} {
     .account-nav {
         margin-left: 0;
     }
diff --git a/src/components/navigation/www/navigation.scss b/src/components/navigation/www/navigation.scss
index 62429789a..b07300010 100644
--- a/src/components/navigation/www/navigation.scss
+++ b/src/components/navigation/www/navigation.scss
@@ -166,7 +166,7 @@
 }
 
 //4 columns
-@media only screen and (max-width: $mobile - 1) {
+@media #{$small} {
     #navigation .inner {
         width: $cols4;
 
@@ -190,7 +190,7 @@
 
 
 //6 columns
-@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+@media #{$medium} {
     #navigation .inner {
         width: $cols6;
 
@@ -212,7 +212,7 @@
 }
 
 //8 columns
-@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+@media #{$intermediate} {
     #navigation .inner {
         width: $cols8;
 
diff --git a/src/components/page/conference/page.scss b/src/components/page/conference/page.scss
index 5f0f2fbf2..e164d2eb2 100644
--- a/src/components/page/conference/page.scss
+++ b/src/components/page/conference/page.scss
@@ -6,19 +6,19 @@
         font-size: 4.5rem;
     }
 
-    @media only screen and (max-width: $mobile - 1) {
+    @media #{$small} {
         h1 {
             font-size: 2.5rem;
         }
     }
 
-    @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    @media #{$medium} {
         h1 {
             font-size: 3rem;
         }
     }
 
-    @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    @media #{$intermediate} {
         h1 {
             font-size: 3.5rem;
         }
@@ -52,7 +52,7 @@
         }
     }
 
-    @media only screen and (max-width: $tablet - 1) {
+    @media #{$medium-and-smaller} {
         margin-top: 50px;
     }
 }
@@ -79,7 +79,7 @@
         font-size: 4rem;
     }
 
-    @media only screen and (max-width: $tablet - 1) {
+    @media #{$medium-and-smaller} {
         h1,
         .title-banner-h1.mod-2017 {
             font-size: 2.5rem;
@@ -96,7 +96,7 @@
         width: 125px;
     }
 
-    @media only screen and (max-width: $tablet - 1) {
+    @media #{$medium-and-smaller} {
         img {
             transform: translate(0, 5px);
             width: 85px;
@@ -108,7 +108,7 @@ section {
     padding: 64px 0;
 }
 
-@media only screen and (max-width: $mobile - 1) {
+@media #{$small} {
     #view {
         width: 100%;
         min-width: 100%;
diff --git a/src/components/registration/registration.scss b/src/components/registration/registration.scss
index acd5c2d8c..3b33ba0a1 100644
--- a/src/components/registration/registration.scss
+++ b/src/components/registration/registration.scss
@@ -10,7 +10,7 @@
     min-height: 27.375rem;
 }
 
-@media only screen and (max-width: $desktop - 1) {
+@media #{$intermediate-and-smaller} {
     .modal-content.mod-registration {
         width: 100%;
         overflow: scroll;
diff --git a/src/components/registration/steps.scss b/src/components/registration/steps.scss
index b5ce409d5..f40dc4060 100644
--- a/src/components/registration/steps.scss
+++ b/src/components/registration/steps.scss
@@ -155,7 +155,7 @@
     }
 }
 
-@media only screen and (max-width: $mobile - 1) {
+@media #{$small} {
     .registration-step {
         &.demographics-step {
             .radio {
@@ -174,7 +174,7 @@
     }
 }
 
-@media only screen and (max-width: $desktop - 1) {
+@media #{$intermediate-and-smaller} {
     .registration-step {
         .form {
             text-align: left;
diff --git a/src/components/slide/slide.scss b/src/components/slide/slide.scss
index 1fbf439ba..45928df61 100644
--- a/src/components/slide/slide.scss
+++ b/src/components/slide/slide.scss
@@ -25,7 +25,7 @@
     }
 }
 
-@media only screen and (max-width: $tablet - 1) {
+@media #{$medium-and-smaller} {
     .slide {
         padding: 0;
     }
diff --git a/src/components/social-message/social-message.scss b/src/components/social-message/social-message.scss
index 258fa713e..a7afbb18c 100644
--- a/src/components/social-message/social-message.scss
+++ b/src/components/social-message/social-message.scss
@@ -53,7 +53,7 @@ a.social-messages-profile-link {
     margin-left: 1.5rem;
 }
 
-@media only screen and (max-width: $mobile - 1) {
+@media #{$small} {
     .social-message {
         text-align: left;
     }
@@ -67,7 +67,7 @@ a.social-messages-profile-link {
     }
 }
 
-@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+@media #{$medium} {
     .social-message {
         text-align: left;
     }
diff --git a/src/components/tooltip/tooltip.scss b/src/components/tooltip/tooltip.scss
index b4286c3c5..76dc2ad81 100644
--- a/src/components/tooltip/tooltip.scss
+++ b/src/components/tooltip/tooltip.scss
@@ -58,7 +58,7 @@
     }
 }
 
-@media only screen and (max-width: $desktop - 1) {
+@media #{$intermediate-and-smaller} {
     .tooltip {
         display: block;
 
diff --git a/src/views/conference/2016/details/details.scss b/src/views/conference/2016/details/details.scss
index 68ab5db56..57ec59495 100644
--- a/src/views/conference/2016/details/details.scss
+++ b/src/views/conference/2016/details/details.scss
@@ -1,11 +1,11 @@
 @import "../../../../frameless";
 
 #view {
-    @media only screen and (max-width: $tablet - 1) {
+    @media #{$medium-and-smaller} {
         margin-top: 100px;
     } 
 
-    @media only screen and (max-width: $desktop - 1) {
+    @media #{$intermediate-and-smaller} {
         text-align: left;
     }   
 }
@@ -49,7 +49,7 @@
 }
 
 //8 columns
-@media only screen and (max-width: $desktop - 1) {
+@media #{$intermediate-and-smaller} {
     .details {
         width: 100%;
     }
diff --git a/src/views/conference/2016/expect/expect.scss b/src/views/conference/2016/expect/expect.scss
index cfc1a3236..95338b11a 100644
--- a/src/views/conference/2016/expect/expect.scss
+++ b/src/views/conference/2016/expect/expect.scss
@@ -25,7 +25,7 @@
             margin-top: 1.2rem;
         }
 
-        @media only screen and (max-width: $tablet - 1) {
+        @media #{$medium-and-smaller} {
             img {
                 width: 50%;
             }
@@ -37,7 +37,7 @@
             }
         }
 
-        @media only screen and (max-width: $desktop - 1) {
+        @media #{$intermediate-and-smaller} {
             .uneven {
                 flex-direction: column;
                 align-items: center;
@@ -80,7 +80,7 @@
             margin: 15px 0;
         }
 
-        @media only screen and (max-width: $desktop - 1) {
+        @media #{$intermediate-and-smaller} {
             .flex-row {
                 flex-direction: column;
                 align-items: center;
@@ -156,7 +156,7 @@
             }
         }
 
-        @media only screen and (max-width: $mobile - 1) {
+        @media #{$small} {
             .flex-row {
                 table {
                     width: 100%;
@@ -164,7 +164,7 @@
             }
         }
 
-        @media only screen and (min-width: $mobile) and (max-width: $desktop - 1) {
+        @media #{$medium-and-intermediate} {
             .flex-row {
                 table {
                     width: $cols6;
@@ -172,7 +172,7 @@
             }
         }
 
-        @media only screen and (max-width: $desktop - 1) {
+        @media #{$intermediate-and-smaller} {
             .flex-row {
                 flex-direction: column;
                 align-items: center;
diff --git a/src/views/conference/2016/index/index.scss b/src/views/conference/2016/index/index.scss
index 12a3a9214..a2d4b16fa 100644
--- a/src/views/conference/2016/index/index.scss
+++ b/src/views/conference/2016/index/index.scss
@@ -48,7 +48,7 @@
             }
         }
 
-        @media only screen and (max-width: $mobile - 1) {
+        @media #{$small} {
             h3 {
                 display: none;
                 margin-top: 0;
@@ -60,7 +60,7 @@
 
         }
 
-        @media only screen and (max-width: $desktop - 1) {
+        @media #{$intermediate-and-smaller} {
             h1 {
                 font-size: 2.5rem;
             }
@@ -85,7 +85,7 @@
                 max-width: 125px;
             }
 
-            @media only screen and (max-width: $tablet - 1) {
+            @media #{$medium-and-smaller} {
                 margin: .5rem;
                 width: 125px;
             }
@@ -93,7 +93,7 @@
     }
 }
 
-@media only screen and (max-width: $tablet - 1) {
+@media #{$medium-and-smaller} {
     .index {
         .flex-row {
             align-items: center;
diff --git a/src/views/conference/2016/plan/plan.scss b/src/views/conference/2016/plan/plan.scss
index f1e4948ac..1f219b5d9 100644
--- a/src/views/conference/2016/plan/plan.scss
+++ b/src/views/conference/2016/plan/plan.scss
@@ -19,13 +19,13 @@
                 width: 100%;
             }
 
-            @media only screen and (max-width: $tablet - 1) {
+            @media #{$medium-and-smaller} {
                 img {
                     width: 30%;
                 }
             }
 
-            @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+            @media #{$intermediate} {
                 img {
                     width: 70%;
                 }
@@ -36,7 +36,7 @@
     .lodging {
         text-align: left;
 
-        @media only screen and (max-width: $desktop - 1) {
+        @media #{$intermediate-and-smaller} {
             .uneven {
                 .short {
                     display: none;
@@ -50,7 +50,7 @@
             align-items: center;
         }
 
-        @media only screen and (max-width: $desktop - 1) {
+        @media #{$intermediate-and-smaller} {
             .flex-row {
                 flex-direction: column-reverse;
             }
@@ -69,13 +69,13 @@
             justify-content: flex-start;
         }
 
-        @media only screen and (max-width: $tablet - 1) {
+        @media #{$medium-and-smaller} {
             ul {
                 max-height: 100%;
             }
         }
 
-        @media only screen and (max-width: $desktop - 1) {
+        @media #{$intermediate-and-smaller} {
             div {
                 text-align: left;
             }
@@ -105,7 +105,7 @@
                 margin: 0;
             }
 
-            @media only screen and (max-width: $tablet - 1) {
+            @media #{$medium-and-smaller} {
                 margin-top: 0;
             }
         }
diff --git a/src/views/conference/2016/schedule/schedule.scss b/src/views/conference/2016/schedule/schedule.scss
index d65a921d0..568a30375 100644
--- a/src/views/conference/2016/schedule/schedule.scss
+++ b/src/views/conference/2016/schedule/schedule.scss
@@ -102,7 +102,7 @@
         }
     }
 
-    @media only screen and (max-width: $mobile - 1) {
+    @media #{$small} {
         .sub-nav {
             flex-wrap: nowrap;
         }
@@ -124,7 +124,7 @@
         }
     }
 
-    @media only screen and (max-width: $tablet - 1) {
+    @media #{$medium-and-smaller} {
         .inner {
             h2 {
                 &.breaking-title {
diff --git a/src/views/conference/2017/index/index.scss b/src/views/conference/2017/index/index.scss
index 6c571b5fd..96a722dbe 100644
--- a/src/views/conference/2017/index/index.scss
+++ b/src/views/conference/2017/index/index.scss
@@ -79,7 +79,7 @@ td {
     color: $type-white;
 }
 
-@media only screen and (max-width: $mobile - 1) {
+@media #{$small} {
     .index.mod-2017 {
         text-align: left;
     }
@@ -123,7 +123,7 @@ td {
     }
 }
 
-@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+@media #{$medium} {
     .index.mod-2017 {
         text-align: left;
     }
@@ -159,7 +159,7 @@ td {
     }
 }
 
-@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+@media #{$intermediate} {
     .index.mod-2017 {
         text-align: left;
     }
diff --git a/src/views/conference/2018/details/details.scss b/src/views/conference/2018/details/details.scss
index 68ab5db56..57ec59495 100644
--- a/src/views/conference/2018/details/details.scss
+++ b/src/views/conference/2018/details/details.scss
@@ -1,11 +1,11 @@
 @import "../../../../frameless";
 
 #view {
-    @media only screen and (max-width: $tablet - 1) {
+    @media #{$medium-and-smaller} {
         margin-top: 100px;
     } 
 
-    @media only screen and (max-width: $desktop - 1) {
+    @media #{$intermediate-and-smaller} {
         text-align: left;
     }   
 }
@@ -49,7 +49,7 @@
 }
 
 //8 columns
-@media only screen and (max-width: $desktop - 1) {
+@media #{$intermediate-and-smaller} {
     .details {
         width: 100%;
     }
diff --git a/src/views/conference/2018/expect/expect.scss b/src/views/conference/2018/expect/expect.scss
index b2d685798..f1cb84919 100644
--- a/src/views/conference/2018/expect/expect.scss
+++ b/src/views/conference/2018/expect/expect.scss
@@ -25,7 +25,7 @@
             margin-top: 1.2rem;
         }
 
-        @media only screen and (max-width: $tablet - 1) {
+        @media #{$medium-and-smaller} {
             img {
                 width: 50%;
             }
@@ -37,7 +37,7 @@
             }
         }
 
-        @media only screen and (max-width: $desktop - 1) {
+        @media #{$intermediate-and-smaller} {
             .uneven {
                 flex-direction: column;
                 align-items: center;
@@ -85,7 +85,7 @@
             margin: 15px 0;
         }
 
-        @media only screen and (max-width: $desktop - 1) {
+        @media #{$intermediate-and-smaller} {
             .flex-row {
                 flex-direction: column;
                 align-items: center;
@@ -163,7 +163,7 @@
             }
         }
 
-        @media only screen and (max-width: $mobile - 1) {
+        @media #{$small} {
             .flex-row {
                 table {
                     width: 100%;
@@ -171,7 +171,7 @@
             }
         }
 
-        @media only screen and (min-width: $mobile) and (max-width: $desktop - 1) {
+        @media #{$medium-and-intermediate} {
             .flex-row {
                 table {
                     width: $cols6;
@@ -179,7 +179,7 @@
             }
         }
 
-        @media only screen and (max-width: $desktop - 1) {
+        @media #{$intermediate-and-smaller} {
             .flex-row {
                 flex-direction: column;
                 align-items: center;
diff --git a/src/views/conference/2018/index/index.scss b/src/views/conference/2018/index/index.scss
index 705775faf..2fb59c052 100644
--- a/src/views/conference/2018/index/index.scss
+++ b/src/views/conference/2018/index/index.scss
@@ -60,7 +60,7 @@
             }
         }
 
-        @media only screen and (max-width: $mobile - 1) {
+        @media #{$small} {
             h3 {
                 display: none;
                 margin-top: 0;
@@ -72,7 +72,7 @@
 
         }
 
-        @media only screen and (max-width: $desktop - 1) {
+        @media #{$intermediate-and-smaller} {
             h1 {
                 font-size: 2.5rem;
             }
@@ -97,7 +97,7 @@
                 max-width: 125px;
             }
 
-            @media only screen and (max-width: $tablet - 1) {
+            @media #{$medium-and-smaller} {
                 margin: .5rem;
                 width: 125px;
             }
@@ -105,7 +105,7 @@
     }
 }
 
-@media only screen and (max-width: $tablet - 1) {
+@media #{$medium-and-smaller} {
     .index {
         .flex-row {
             align-items: center;
diff --git a/src/views/conference/2018/plan/plan.scss b/src/views/conference/2018/plan/plan.scss
index f1e4948ac..1f219b5d9 100644
--- a/src/views/conference/2018/plan/plan.scss
+++ b/src/views/conference/2018/plan/plan.scss
@@ -19,13 +19,13 @@
                 width: 100%;
             }
 
-            @media only screen and (max-width: $tablet - 1) {
+            @media #{$medium-and-smaller} {
                 img {
                     width: 30%;
                 }
             }
 
-            @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+            @media #{$intermediate} {
                 img {
                     width: 70%;
                 }
@@ -36,7 +36,7 @@
     .lodging {
         text-align: left;
 
-        @media only screen and (max-width: $desktop - 1) {
+        @media #{$intermediate-and-smaller} {
             .uneven {
                 .short {
                     display: none;
@@ -50,7 +50,7 @@
             align-items: center;
         }
 
-        @media only screen and (max-width: $desktop - 1) {
+        @media #{$intermediate-and-smaller} {
             .flex-row {
                 flex-direction: column-reverse;
             }
@@ -69,13 +69,13 @@
             justify-content: flex-start;
         }
 
-        @media only screen and (max-width: $tablet - 1) {
+        @media #{$medium-and-smaller} {
             ul {
                 max-height: 100%;
             }
         }
 
-        @media only screen and (max-width: $desktop - 1) {
+        @media #{$intermediate-and-smaller} {
             div {
                 text-align: left;
             }
@@ -105,7 +105,7 @@
                 margin: 0;
             }
 
-            @media only screen and (max-width: $tablet - 1) {
+            @media #{$medium-and-smaller} {
                 margin-top: 0;
             }
         }
diff --git a/src/views/conference/2018/schedule/schedule.scss b/src/views/conference/2018/schedule/schedule.scss
index 27b4625a8..18edbd60b 100644
--- a/src/views/conference/2018/schedule/schedule.scss
+++ b/src/views/conference/2018/schedule/schedule.scss
@@ -102,7 +102,7 @@
         }
     }
 
-    @media only screen and (max-width: $mobile - 1) {
+    @media #{$small} {
         .sub-nav {
             flex-wrap: nowrap;
         }
@@ -124,7 +124,7 @@
         }
     }
 
-    @media only screen and (max-width: $tablet - 1) {
+    @media #{$medium-and-smaller} {
         .inner {
             h2 {
                 &.breaking-title {
diff --git a/src/views/developers/developers.scss b/src/views/developers/developers.scss
index ea706de08..b598c8501 100644
--- a/src/views/developers/developers.scss
+++ b/src/views/developers/developers.scss
@@ -170,7 +170,7 @@ $developer-spot: $ui-aqua;
 }
 
 //4 columns
-@media only screen and (max-width: $mobile - 1) {
+@media #{$small} {
     #view {
         text-align: left;
     }
@@ -196,7 +196,7 @@ $developer-spot: $ui-aqua;
 }
 
 //6 columns
-@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+@media #{$medium} {
     #view {
         text-align: left;
     }
@@ -216,7 +216,7 @@ $developer-spot: $ui-aqua;
 }
 
 //8 columns
-@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+@media #{$intermediate} {
     #view {
         text-align: left;
     }
diff --git a/src/views/download/download.scss b/src/views/download/download.scss
index 60a32e3ab..146508a6f 100644
--- a/src/views/download/download.scss
+++ b/src/views/download/download.scss
@@ -111,7 +111,7 @@
         color: $ui-white;
     }
     
-    @media only screen and (max-width: $mobile - 1) {
+    @media #{$small} {
         .inner {
             .installation-column {
                 max-width: 100%;
@@ -119,7 +119,7 @@
         }
     }
 
-    @media only screen and (max-width: $desktop - 1) {
+    @media #{$intermediate-and-smaller} {
         .three-col-row {
             flex-direction: column;
             align-items: center;
diff --git a/src/views/explore/explore.scss b/src/views/explore/explore.scss
index c4159fcd5..1252422e3 100644
--- a/src/views/explore/explore.scss
+++ b/src/views/explore/explore.scss
@@ -120,7 +120,7 @@ $base-bg: $ui-white;
 }
 
 //4 columns
-@media only screen and (max-width: $mobile - 1) {
+@media #{$small} {
     .outer {
         .tabs {
             width: $cols4;
@@ -139,7 +139,7 @@ $base-bg: $ui-white;
 }
 
 //6 columns
-@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+@media #{$medium} {
     .outer {
         .tabs {
             width: $cols6;
@@ -158,7 +158,7 @@ $base-bg: $ui-white;
 }
 
 // 8 columns
-@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+@media #{$intermediate} {
     .outer {
         .tabs {
             width: $cols8;
diff --git a/src/views/guidelines/guidelines.scss b/src/views/guidelines/guidelines.scss
index 9084c6fb3..92566445d 100644
--- a/src/views/guidelines/guidelines.scss
+++ b/src/views/guidelines/guidelines.scss
@@ -14,7 +14,7 @@
     }
 }
 
-@media only screen and (max-width: $tablet - 1){
+@media #{$medium-and-smaller}{
     .guidelines-footer {
         img {
             display: none;
diff --git a/src/views/messages/messages.scss b/src/views/messages/messages.scss
index f91c679ed..3932c30f2 100644
--- a/src/views/messages/messages.scss
+++ b/src/views/messages/messages.scss
@@ -129,7 +129,7 @@
     word-wrap: break-word;
 }
 
-@media only screen and (max-width: $mobile - 1) {
+@media #{$small} {
     .flex-row.admin-message-header,
     .flex-row.mod-comment-message {
         flex-direction: row;
@@ -144,7 +144,7 @@
     }
 }
 
-@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+@media #{$medium} {
     .flex-row.admin-message-header,
     .flex-row.mod-comment-message {
         flex-direction: row;
@@ -159,7 +159,7 @@
     }
 }
 
-@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+@media #{$intermediate} {
     .comment-text {
         max-width: 23.75rem;
     }
diff --git a/src/views/search/search.scss b/src/views/search/search.scss
index 93e3c3fc0..07bf1f911 100644
--- a/src/views/search/search.scss
+++ b/src/views/search/search.scss
@@ -169,7 +169,7 @@ $base-bg: $ui-white;
 }
 
 //4 columns
-@media only screen and (max-width: $mobile - 1) {
+@media #{$small} {
     .outer {
         .search {
             width: $cols4;
@@ -197,7 +197,7 @@ $base-bg: $ui-white;
 
 
 //6 columns
-@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+@media #{$medium} {
     .outer {
         .tabs {
             width: $cols6;
@@ -216,7 +216,7 @@ $base-bg: $ui-white;
 }
 
 // 8 columns
-@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+@media #{$intermediate} {
     .outer {
         .tabs {
             width: $cols8;
diff --git a/src/views/splash/beta/middle-banner.scss b/src/views/splash/beta/middle-banner.scss
index 8578b51d1..ca0e759f4 100644
--- a/src/views/splash/beta/middle-banner.scss
+++ b/src/views/splash/beta/middle-banner.scss
@@ -65,7 +65,7 @@
     }
 }
 
-@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+@media #{$intermediate} {
     .beta-middle-banner {
         margin: 20px auto 40px auto;
         width: $cols8;
diff --git a/src/views/splash/splash.scss b/src/views/splash/splash.scss
index 4fd6f225a..cf6ab16e3 100644
--- a/src/views/splash/splash.scss
+++ b/src/views/splash/splash.scss
@@ -96,7 +96,7 @@
 }
 
 //4 columns
-@media only screen and (max-width: $mobile - 1) {
+@media #{$small} {
     .splash {
         .splash-header {
             flex-wrap: wrap;
@@ -119,7 +119,7 @@
 }
 
 //6 columns
-@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+@media #{$medium} {
     .splash {
         .splash-header {
             flex-wrap: wrap;
@@ -143,7 +143,7 @@
 }
 
 //6 columns
-@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+@media #{$intermediate} {
     .splash {
         .splash-header {
             margin: 0 auto;
diff --git a/src/views/teachers/landing/landing.scss b/src/views/teachers/landing/landing.scss
index 8863ab74b..324f36c3a 100644
--- a/src/views/teachers/landing/landing.scss
+++ b/src/views/teachers/landing/landing.scss
@@ -247,7 +247,7 @@ $story-width: $cols3;
 }
 
 //4 columns
-@media only screen and (max-width: $mobile - 1) {
+@media #{$small} {
     $story-width: $cols4;
 
     .stories {
@@ -311,7 +311,7 @@ $story-width: $cols3;
 }
 
 //6 columns
-@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+@media #{$medium} {
     $story-width: $cols3;
 
     .stories {
@@ -366,7 +366,7 @@ $story-width: $cols3;
 
 
 //8 columns
-@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+@media #{$intermediate} {
     $story-width: $cols4;
 
     .stories {
@@ -500,7 +500,7 @@ $story-width: $cols3;
 }
 
 // 12 columns
-@media only screen and (min-width: $desktop) {
+@media #{$big} {
     $story-width: $cols3;
 
     .stories {
diff --git a/src/views/tips/tips.scss b/src/views/tips/tips.scss
index f9b4c62aa..26adec97c 100644
--- a/src/views/tips/tips.scss
+++ b/src/views/tips/tips.scss
@@ -83,7 +83,7 @@ img.tips-icon {
     height: 1.75rem;
 }
 //4 columns
-@media only screen and (max-width: $mobile - 1) {
+@media #{$small} {
 
     .title-banner {
         &.masthead {
@@ -121,7 +121,7 @@ img.tips-icon {
 }
 
 //6 columns
-@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+@media #{$medium} {
     .title-banner {
         &.masthead {
 
@@ -152,7 +152,7 @@ img.tips-icon {
 
 
 //8 columns
-@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+@media #{$intermediate} {
     .title-banner {
         &.masthead {
             padding-bottom: 2rem;
@@ -189,7 +189,7 @@ img.tips-icon {
 }
 
 // 12 columns
-@media only screen and (min-width: $desktop) {
+@media #{$big} {
     .title-banner {
         &.masthead {
             padding-bottom: 1.25rem;
diff --git a/src/views/wedo2-legacy/wedo2.scss b/src/views/wedo2-legacy/wedo2.scss
index c661e2e32..56c80034d 100644
--- a/src/views/wedo2-legacy/wedo2.scss
+++ b/src/views/wedo2-legacy/wedo2.scss
@@ -156,7 +156,7 @@
 // Responsive Behavior
 
 //4 columns
-@media only screen and (max-width: $mobile - 1) {
+@media #{$small} {
     .wedo {
         .inner {
             margin: 0 auto;
@@ -186,7 +186,7 @@
 }
 
 //6 columns
-@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+@media #{$medium} {
     .wedo {
         .project-list,
         .columns3 {
@@ -210,7 +210,7 @@
 }
 
 //8 columns
-@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+@media #{$intermediate} {
     #view {
         text-align: center;
     }