diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 66adef5de..5d3418748 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -205,7 +205,7 @@ body.admin {
 .delete {
   border-bottom: 1px dotted #CF2A0E;
   color: $delete;
-  font-size: rem-calc(12);
+  font-size: $small-font-size;
 
   &:hover, &:active, &:focus {
     border-bottom: 1px dotted white;
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 88fd8a14a..ad3797165 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1,127 +1,50 @@
 // Table of Contents
 //
-// 01. Variables
-// 02. Mixins
-// 03. Global styles
-// 04. Header
-// 05. Footer
-// 06. Tags
-// 07. Auth pages
-// 08. Forms
-// 09. Alerts
-// 10. User account
-// 11. Filters & search
-// 12. Official levels
-// 13. Pagination
-// 14. Tables
-// 15. Social
-// 16. Pages
-// 17. Verification
-// 18. Comments
-// 19. Flags
-// 20. Accesibility
-// 21. Activity
+// 01. Global styles
+// 02. Header
+// 03. Footer
+// 04. Tags
+// 05. Auth pages
+// 06. Forms
+// 07. Alerts
+// 08. User account
+// 09. Filters & search
+// 10. Official levels
+// 11. Pagination
+// 12. Tables
+// 13. Social
+// 14. Pages
+// 15. Verification
+// 16. Comments
+// 17. Flags
+// 18. Activity
 //
 
-// 01. Variables
+// 01. Global styles
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-@import "variables";
+*, html {
+  margin: 0;
+  padding: 0;
+}
 
-// 02. Mixins
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+html, body {
+  height: 100%;
+}
 
-@mixin back {
-  color: $text-medium;
+body {
+  background: white;
+  color: $text;
   font-family: $font-sans;
-  font-size: $small-font-size;
+  font-size: $base-font-size;
 }
 
-@mixin logo {
-  color: white;
-  font-family: $font-logo;
-  font-weight: lighter;
-
-  @media (min-width: $small-breakpoint) {
-    font-size: rem-calc(24);
-    line-height: rem-calc(48);
-  }
-
-  img {
-    height: 48px;
-    width: 48px;
-
-    @media (min-width: $small-breakpoint) {
-      height: 80px;
-      margin-right: rem-calc(12);
-      margin-top: 0;
-      width: 80px;
-    }
-  }
-}
-
-@mixin title {
-  font-size: $title-font-size;
+h1, h2, h3, h4, h5, h6 {
+  clear: both;
+  font-family: $font-sans;
   font-weight: $font-bold;
 }
 
-@mixin h1 {
-  font-family: $font-sans;
-  font-size: $h2-font-size;
-  font-weight: $font-bold;
-
-  @media (min-width: $small-breakpoint) {
-    font-size: $h1-font-size;
-  }
-}
-
-@mixin h2 {
-  font-family: $font-sans;
-  font-size: $h3-font-size;
-  font-weight: $font-bold;
-
-  @media (min-width: $small-breakpoint) {
-    font-size: $h2-font-size;
-  }
-}
-
-@mixin h3 {
-  font-family: $font-sans;
-  font-size: $h4-font-size;
-  font-weight: $font-bold;
-
-  @media (min-width: $small-breakpoint) {
-    font-size: $h3-font-size;
-  }
-}
-
-@mixin h4 {
-  font-family: $font-sans;
-  font-size: $h5-font-size;
-  font-weight: $font-bold;
-
-  @media (min-width: $small-breakpoint) {
-    font-size: $h4-font-size;
-  }
-}
-
-@mixin h5 {
-  font-family: $font-sans;
-  font-size: $h6-font-size;
-  font-weight: $font-bold;
-
-  @media (min-width: $small-breakpoint) {
-    font-size: $h5-font-size;
-  }
-}
-
-@mixin h6 {
-  font-family: $font-sans;
-  font-size: $h6-font-size;
-  font-weight: $font-normal;
-  text-transform: uppercase;
-}
-
 h1 {
   @include h1();
 }
@@ -144,49 +67,13 @@ h5 {
 
 h6 {
   @include h6();
-}
-
-h1, h2, h3, h4, h5, h6 {
-  clear: both;
-  font-family: $font-sans;
-  line-height: $heading-line-height;
-  margin: rem-calc(12) 0 rem-calc(6);
-
-  &.lead {
-    border-bottom: rem-calc(6) solid $brand;
-  }
-
-  &.secondary {
-    color: $text-medium;
-  }
-}
-
-// 03. Global styles
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-*, html {
-  margin: 0;
-  padding: 0;
-}
-
-html, body {
-  height: 100%;
-}
-
-body {
-  background: white;
-  color: $text;
-  font-family: $font-sans;
-  font-size: rem-calc(17);
-  font-weight: 400;
-  line-height: rem-calc(26);
-  text-rendering: optimizeLegibility;
+  font-weight: $font-normal;
 }
 
 p {
-  font-size: rem-calc(17);
-  font-weight: 400;
-  line-height: rem-calc(26);
+  font-size: $base-font-size;
+  font-weight: $font-normal;
+  line-height: $base-line-height;
 }
 
 a {
@@ -208,7 +95,7 @@ a {
 
 .button {
   background: $brand;
-  font-family: $font-sans !important;
+  font-family: $font-sans;
 
   &:hover {
     text-decoration: none !important;
@@ -236,46 +123,22 @@ a {
 }
 
 .sidebar {
-  margin-top: rem-calc(24);
-  margin-bottom: rem-calc(48);
+  margin-top: $line-height;
+  margin-bottom: $line-height*2;
 }
 
 .sidebar-divider {
   border-top: 1px solid $border;
-  margin-top: rem-calc(24);
+  margin-top: $line-height;
 
   &:first-child {
     margin-top: 0;
   }
 }
 
-.sub-nav {
-  background-color: #f2f2f2;
-  border-radius: rem-calc(3);
-  padding: rem-calc(10) rem-calc(10) rem-calc(10) 0;
-  margin: rem-calc(12) 0;
-}
-
-.sub-nav dt, .sub-nav dd, .sub-nav li {
-  padding: rem-calc(3) 0;
-
-  &.active {
-    background: #008CBA;
-    border-radius: rem-calc(3);
-    color: white;
-    cursor: default;
-    font-weight: normal;
-    padding: rem-calc(3) rem-calc(14);
-
-    a:hover {
-      color: #737373;
-    }
-  }
-}
-
 .f-dropdown {
   li a {
-    font-size: rem-calc(12);
+    font-size: $small-font-size;
 
     &:hover {
       color: $link-hover;
@@ -312,14 +175,9 @@ a {
   }
 }
 
-.progress {
-  background-color: rgba(0,0,0,.06);
-  border: 0;
-}
-
 .wrapper {
   min-height: 100%;
-  margin: 0 auto rem-calc(-288);
+  margin: 0 auto (-$line-height)*12;
   height: auto !important;
   height: 100%;
 }
@@ -330,7 +188,7 @@ a {
 
 .footer, .push {
   clear: both;
-  min-height: rem-calc(288);
+  min-height: $line-height*12;
 }
 
 .ie-alert-box {
@@ -339,43 +197,31 @@ a {
   width: 100%;
 
   a.close {
-    font-size: 36px;
+    font-size: $h2-font-size;
     top: 20%;
   }
 }
 
-.moderator-actions {
-  margin: rem-calc(24) 0;
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
 }
 
-.text-medium {
-  font-size: rem-calc(16) !important;
-}
-
-// 04. Header
+// 02. Header
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 header {
   background: $highlight;
-  border-bottom: rem-calc(1) solid $border;
+  border-bottom: 1px solid $border;
 
   .home-page {
-    padding-top: rem-calc(24);
-  }
-
-  .icon-external {
-    display: inline-block;
-    font-size: rem-calc(12);
-    opacity: .5;
-    padding-top: rem-calc(3);
-    vertical-align: top;
-
-    @media (min-width: $small-breakpoint) {
-      padding-top: 0;
-      position: absolute;
-      right: -18px;
-      top: 3px;
-    }
+    padding: $line-height 0;
   }
 
   .selected {
@@ -392,10 +238,6 @@ header {
       float: left;
       margin-left: rem-calc(12);
     }
-
-    .icon-language {
-      vertical-align: text-top;
-    }
   }
 
   .external-links {
@@ -480,10 +322,10 @@ header {
 
   &.expanded .toggle-topbar a {
     color: white;
-  }
 
-  &.expanded .toggle-topbar a span::after {
-    box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
+    span::after {
+      box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
+    }
   }
 }
 
@@ -492,16 +334,43 @@ header {
   width: 100%;
 
   ul {
-    margin-left: 0;
-    margin-right: rem-calc(12);
+    margin-left: rem-calc(12);
 
     @media (min-width: $small-breakpoint) {
-      margin-left: rem-calc(24);
+      margin-left: 0;
     }
-  }
 
-  ul li {
-    background: none;
+    li {
+      background: none;
+
+      &:not(.has-form) a:not(.button) {
+        background: none;
+        color: white;
+
+        &:hover {
+          background: none;
+        }
+
+        @media (min-width: $small-breakpoint) {
+          background: none;
+          line-height: rem-calc(80);
+          padding: 0 rem-calc(12);
+        }
+      }
+
+      &:hover {
+        background: none;
+        color: white;
+        text-decoration: underline;
+        transition: text-decoration 275ms;
+      }
+
+      &.active:not(.has-form) a:not(.button) {
+        background: none;
+        height: rem-calc(96);
+        line-height: $line-height*4;
+      }
+    }
   }
 
   ul li > a {
@@ -512,6 +381,10 @@ header {
       line-height: $line-height*1.5;
       text-align: left;
       background: none;
+
+      &:hover, &:focus {
+        background-color: #007095 !important;
+      }
     }
 
     @media (min-width: $small-breakpoint) {
@@ -526,54 +399,6 @@ header {
       }
     }
   }
-
-  ul li > a {
-    font-size: $small-font-size;
-  }
-
-  ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
-    background-color: #007095 !important;
-  }
-
-  ul li, ul li:hover:not(.has-form) > a:not(.button) {
-
-    @media (min-width: $small-breakpoint) {
-      background: none;
-      border: 0;
-      line-height: rem-calc(80);
-    }
-  }
-
-  ul {
-    margin-left: rem-calc(12);
-
-    @media (min-width: $small-breakpoint) {
-      margin-left: 0;
-    }
-
-    li:not(.has-form) a:not(.button) {
-      background: none;
-      color: white;
-
-      @media (min-width: $small-breakpoint) {
-        line-height: rem-calc(80);
-        padding: 0 rem-calc(12);
-      }
-
-      &:hover {
-        background: none;
-        color: white;
-        text-decoration: underline;
-        transition: text-decoration 275ms;
-      }
-    }
-
-    li.active:not(.has-form) a:not(.button) {
-      background: none;
-      height: rem-calc(96);
-      line-height: $line-height*4;
-    }
-  }
 }
 
 .top-links {
@@ -653,33 +478,34 @@ header {
   }
 }
 
-// 05. Footer
+// 03. Footer
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 footer {
-  color: #171819;
+  color: $footer-color;
 
-  .logo {
-    @include logo;
+  .logo a {
+    font-family: $font-logo;
+    text-decoration: none;
 
-    a {
-      color: #454A4C;
-      line-height: rem-calc(36);
-      padding-left: 0;
-      text-decoration: none;
+    &:hover {
+      text-decoration: underline;
     }
   }
 
   p {
     font-size: $small-font-size;
+
+    .info a {
+      text-decoration: underline;
+    }
   }
 
   a, a:active, a:focus {
-    color: #454A4C;
-    text-decoration: underline;
+    color: $footer-link;
 
     &:hover {
-      color: #171819;
+      color: $footer-color;
     }
   }
 
@@ -687,35 +513,32 @@ footer {
     padding-left: 0;
   }
 
-  h4 {
+  h2 a {
 
-    a {
-      border-bottom: 1px solid #BFC1C3;
-      display: block;
-      padding-bottom: rem-calc(6);
-      text-decoration: none;
-    }
+    border-bottom: 1px solid $footer-border;
+    display: block;
+    font-size: $h3-font-size;
+    line-height: $h3-line-height;
+    padding-bottom: $line-height/4;
+    text-decoration: none;
   }
 }
 
 .footer {
-  background: #DEE0E2;
+  background: $footer-bg;
   border-top: rem-calc(6) solid $brand;
   padding-top: $line-height;
 }
 
 .subfooter {
-  border-top: 1px solid #BFC1C3;
-  opacity: .75;
-  margin-top: rem-calc(24);
+  border-top: 1px solid $footer-border;
   padding-top: rem-calc(12);
 }
 
-// 06. Tags
+// 04. Tags
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .tags, .tag-cloud {
-  font-family: $font-sans;
 
   a {
     background: $border;
@@ -768,7 +591,7 @@ footer {
   }
 }
 
-// 07. Auth pages
+// 05. Auth pages
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .auth-page {
@@ -820,7 +643,7 @@ footer {
   }
 }
 
-// 08. Forms
+// 06. Forms
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 form.locale-form {
@@ -943,7 +766,7 @@ form {
   }
 }
 
-// 09. Alerts
+// 07. Alerts
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .alert-box {
@@ -1006,62 +829,13 @@ label.error, label.error a {
   padding-top: rem-calc(24);
 }
 
-// 10. User account
+// 08. User account
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .account {
   background: white;
   padding-top: rem-calc(24);
 
-  a {
-    font-family: $font-sans;
-  }
-
-  .icon-debates {
-    color: $debates;
-    font-size: rem-calc(60);
-    line-height: $line-height;
-    opacity: .5;
-  }
-
-  .avatar {
-    margin-bottom: rem-calc(24);
-  }
-
-  .initialjs-avatar {
-    margin-bottom: $line-height;
-  }
-
-  h1.avatar {
-    margin-left: rem-calc(12);
-  }
-
-  h3 {
-    clear: both;
-    font-size: rem-calc(20);
-    font-weight: bold;
-    line-height: $line-height;
-    margin: 0;
-    margin-bottom: rem-calc(12);
-  }
-
-  .recommendations {
-    list-style-type: none;
-    margin-left: 0;
-    margin-top: rem-calc(24);
-
-    li {
-      font-size: rem-calc(12);
-      margin: rem-calc(12) 0;
-
-      &:before {
-        color: $debates;
-        content: "l ";
-        font-family: "icons" !important;
-      }
-    }
-  }
-
   select {
     height: rem-calc(48);
     margin-right: rem-calc(12);
@@ -1143,7 +917,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
   }
 }
 
-// 11. Filters & search
+// 09. Filters & search
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .filters, .search-results {
@@ -1210,7 +984,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
   }
 }
 
-// 12. Officials levels
+// 10. Officials levels
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 [class^="level-"] {
@@ -1249,7 +1023,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
   background: $level-5;
 }
 
-// 13. Pagination
+// 11. Pagination
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 ul.pagination {
@@ -1260,7 +1034,7 @@ ul.pagination {
   }
 }
 
-// 14. Tables
+// 12. Tables
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 table {
@@ -1285,7 +1059,7 @@ table {
   }
 }
 
-// 15. Social
+// 13. Social
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .button.button-twitter {
@@ -1517,7 +1291,7 @@ table {
   }
 }
 
-// 16. Pages
+// 14. Pages
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .page {
@@ -1608,7 +1382,7 @@ table {
   }
 }
 
-// 17. Verification
+// 15. Verification
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .verification {
@@ -1758,7 +1532,7 @@ table {
   }
 }
 
-// 18. Comments
+// 16. Comments
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .comments {
@@ -1921,7 +1695,7 @@ table {
   }
 }
 
-// 19. Flags
+// 17. Flags
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .flag-content {
@@ -1946,38 +1720,20 @@ table {
   color: $delete;
 }
 
-// 20. Accesibility
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-
-// 21. Activity
+// 18. Activity
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .activity {
-  margin-bottom: rem-calc(48);
-  margin-top: rem-calc(24);
+  margin-bottom: $line-height*2;
+  margin-top: $line-height;
 
   .sub-nav {
-    background: none;
     border-bottom: 1px solid $border;
-    border-radius: 0;
-    padding-bottom: 0;
 
     dd.active {
-      background: none;
       border-bottom: 2px solid $brand;
-      border-radius: 0;
       color: $brand;
+      padding-bottom: $line-height/4;
     }
   }
 
@@ -1994,7 +1750,6 @@ table {
         font-size: rem-calc(24);
         left: 4px;
         position: absolute;
-
       }
     }
 
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index c2d9b5e0f..57110299c 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -165,8 +165,6 @@
   .progress {
     background-color: rgba(255,255,255,.8);
     height: rem-calc(12);
-    margin-bottom: rem-calc(6);
-    margin-top: rem-calc(4);
 
     .meter {
       background: $votes-like;
@@ -178,8 +176,8 @@
     color: $brand;
     vertical-align: top;
     position: absolute;
-    top: 12px;
-    right: 18px;
+    top: 13px;
+    right: 20px;
   }
 
   abbr {
@@ -295,22 +293,14 @@
     opacity: .5;
   }
 
-  h2 {
-    clear: both;
-    font-size: rem-calc(20);
-    font-weight: bold;
-    line-height: $line-height;
-    margin: 0;
-  }
-
   .recommendations {
     list-style-type: none;
     margin-left: 0;
-    margin-top: rem-calc(24);
+    margin-top: $line-height;
 
     li {
-      font-size: rem-calc(12);
-      margin: rem-calc(12) 0;
+      font-size: $small-font-size;
+      margin: $line-height/2 0;
 
       &:before {
         content: "l ";
@@ -334,7 +324,7 @@
   }
 }
 
-// 02. Show participation
+// 03. Show participation
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .debate-show, .proposal-show {
@@ -344,18 +334,6 @@
     @include back;
   }
 
-  h1 {
-    clear: both;
-    font-size: rem-calc(30);
-    font-weight: bold;
-    margin: 0;
-    text-transform: lowercase;
-
-    &:first-letter {
-      text-transform: uppercase;
-    }
-  }
-
   h4 {
     margin: rem-calc(12) 0;
   }
@@ -367,7 +345,7 @@
   .debate-info, .proposal-info {
     clear: both;
     color: $text-medium;
-    font-family: $font-sans;
+    font-size: $small-font-size;
     line-height: $line-height*2;
     position: relative;
 
@@ -376,7 +354,7 @@
     }
 
     p {
-      font-size: rem-calc(15);
+      font-size: $small-font-size;
       line-height: $line-height;
       margin: 0;
     }
@@ -634,7 +612,7 @@
 
     .debate-info, .proposal-info {
       color: $text-medium;
-      font-family: $font-sans;
+      font-size: $small-font-size;
       margin: rem-calc(6) 0 0;
 
       .icon-comments {
diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss
index f859245c2..72fb27788 100644
--- a/app/assets/stylesheets/variables.scss
+++ b/app/assets/stylesheets/variables.scss
@@ -11,27 +11,35 @@
 // 01. Typography
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-$base-font-size:      rem-calc(17);
-$small-font-size:     rem-calc(14);
-$lead-font-size:      rem-calc(20);
-$title-font-size:     rem-calc(52);
-$h1-font-size:        rem-calc(40);
-$h2-font-size:        rem-calc(30);
-$h3-font-size:        rem-calc(20);
-$h4-font-size:        rem-calc(17);
-$h5-font-size:        rem-calc(15);
-$h6-font-size:        rem-calc(13);
-$base-line-height:    1.5;
-$heading-line-height: 1.3;
-$lead-line-height:    1.7;
-
-$font-sans:           'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
 $font-logo:           'Lato' !important;
+$font-sans:           'Source Sans Pro', 'Helvetica', 'Arial', sans-serif !important;
 
 $font-normal:         400;
 $font-bold:           700;
 
-$line-height: rem-calc(24);
+$base-font-size:      rem-calc(17);
+$base-line-height:    rem-calc(26);
+
+$h1-font-size:        rem-calc(44);
+$h1-line-height:      rem-calc(57);
+
+$h2-font-size:        rem-calc(34);
+$h2-line-height:      rem-calc(44);
+
+$h3-font-size:        rem-calc(24);
+$h3-line-height:      rem-calc(31);
+
+$h4-font-size:        rem-calc(19);
+$h4-line-height:      rem-calc(25);
+
+$h5-font-size:        rem-calc(16);
+$h5-line-height:      rem-calc(21);
+
+$h6-font-size:        rem-calc(13);
+$h6-line-height:      rem-calc(17);
+
+$small-font-size:     rem-calc(14);
+$line-height:         rem-calc(24);
 
 // 02. Colors
 // - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -66,6 +74,11 @@ $proposals-border:  #CC8425;
 
 $highlight:         #E7F2FC;
 
+$footer-bg:         #DEE0E2;
+$footer-color:      #171819;
+$footer-link:       #454A4C;
+$footer-border:     #BFC1C3;
+
 // 03. Forms
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
@@ -116,9 +129,3 @@ $small-breakpoint:  em-calc(640);
 $medium-breakpoint: em-calc(1024);
 $large-breakpoint:  em-calc(1440);
 $xlarge-breakpoint: em-calc(1920);
-
-$small-range:   (0, $small-breakpoint);
-$medium-range:  ($small-breakpoint  + em-calc(1), $medium-breakpoint);
-$large-range:   ($medium-breakpoint + em-calc(1), $large-breakpoint);
-$xlarge-range:  ($large-breakpoint  + em-calc(1), $xlarge-breakpoint);
-$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999));