diff --git a/src/styles/_config.sass b/src/styles/_config.sass
index a0d693f1..fb98d5da 100644
--- a/src/styles/_config.sass
+++ b/src/styles/_config.sass
@@ -158,4 +158,6 @@ $tooltip-opacity: 1
 
 $nav-link-height: 37px
 $navbar-padding-x: 0
-$navbar-padding-y: 0
\ No newline at end of file
+$navbar-padding-y: 0
+
+$grid-breakpoints: (xs: 0,sm: 576px,md: 768px,lg: 1100px,xl: 1500px, xxl: 1800px)
diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass
index 329b7038..790ab1f4 100644
--- a/src/styles/_utils.sass
+++ b/src/styles/_utils.sass
@@ -171,17 +171,25 @@
 /* Small but wide: phablets, iPads
  **  Menu is collapsed, columns stack, no brand */
 =media-sm
-	@media (min-width: #{$screen-tablet}) and (max-width: #{$screen-desktop - 1px})
+	@include media-breakpoint-up(sm)
 		@content
 
 /* Tablets portrait.
  **  Menu is expanded, but columns stack, brand is shown */
 =media-md
-	@media (min-width: #{$screen-desktop})
+	@include media-breakpoint-up(md)
 		@content
 
 =media-lg
-	@media (min-width: #{$screen-lg-desktop})
+	@include media-breakpoint-up(lg)
+		@content
+
+=media-xl
+	@include media-breakpoint-up(xl)
+		@content
+
+=media-xxl
+	@include media-breakpoint-up(xxl)
 		@content
 
 =media-print
diff --git a/src/styles/blog.sass b/src/styles/blog.sass
index 957d40e6..5165732f 100644
--- a/src/styles/blog.sass
+++ b/src/styles/blog.sass
@@ -49,7 +49,6 @@
 @import _comments
 @import _notifications
 
-
 #blog_post-edit-form
 	padding: 20px