diff --git a/styles/_buttons.scss b/styles/_buttons.scss
index 7b030ce20e..3e1d3de7b9 100644
--- a/styles/_buttons.scss
+++ b/styles/_buttons.scss
@@ -52,15 +52,13 @@ p + .readmore {
   font-weight: 700;
   z-index: 1000;
   color: white;
-}
-@media screen and (max-width: 767px) {
-  .jump-to-top {
+
+  &::after {
+    content: " ↑"
+  }
+
+  @include media-breakpoint-down(sm) {
     bottom: 40px;
     right: 40px;
   }
 }
-
-
-.btn.jump-to-top::after {
-  content: " ↑"
-}
diff --git a/styles/_content.scss b/styles/_content.scss
index f146b4fd66..3ab4dcdf05 100644
--- a/styles/_content.scss
+++ b/styles/_content.scss
@@ -116,27 +116,28 @@ td:nth-child(1) {
 }
 .square {
   position: relative;
-  flex-basis: calc(25% - 30px);
+  flex-basis: calc(50% - 30px); // Mobile
   margin: 15px;
   box-sizing: border-box;
   justify-content: center;
   align-items: center;
   border-radius: 8px;
+
+  &::before {
+    content: '';
+    display: block;
+    padding-top: 100%;
+  }
+
   &-50 {
     flex-basis: calc(50% - 30px);
   }
-}
-@media (max-width: 768px) {
-  .square {
-    flex-basis: calc(50% - 30px);
+
+  @include media-breakpoint-up(lg) {
+    flex-basis: calc(25% - 30px);
   }
 }
 
-.square:before {
-  content: '';
-  display: block;
-  padding-top: 100%;
-}
 .card-wrapper {
   width: 100%;
 }
@@ -144,7 +145,7 @@ td:nth-child(1) {
   padding: 2rem;
   background: rgba(34, 37, 43, 0.5);
   backdrop-filter: blur(3px);
-  @media (max-width: 768px) {
+  @include media-breakpoint-down(sm) {
     margin-left: 15px;
     margin-right: 15px;
   }
@@ -158,7 +159,7 @@ td:nth-child(1) {
   margin-left: -32px;
   transform-origin: top left;
 }
-@media (max-width: 992px) {
+@include media-breakpoint-down(md) {
   .card-deck {
     display: block !important;
   }
diff --git a/styles/_forms.scss b/styles/_forms.scss
index 51796c8dff..ad780be545 100644
--- a/styles/_forms.scss
+++ b/styles/_forms.scss
@@ -1,8 +1,8 @@
 form {
-	input {
-		background: rgba(184, 189, 199, 0.1);
-		border: 1px solid #B8BDC7;
-		box-sizing: border-box;
-		border-radius: 2px;
-	}
+  input {
+    background: rgba(184, 189, 199, 0.1);
+    border: 1px solid #B8BDC7;
+    box-sizing: border-box;
+    border-radius: 2px;
+  }
 }
\ No newline at end of file
diff --git a/styles/_helpers.scss b/styles/_helpers.scss
index 28f1210b99..b9870d0dd1 100644
--- a/styles/_helpers.scss
+++ b/styles/_helpers.scss
@@ -1,158 +1,158 @@
 /* HEIGHT AND WIDTH HELPERS */
 .h32 {
-	height: 32px;
+  height: 32px;
 }
 .w32 {
-	width: 32px;
+  width: 32px;
 }
 .h36 {
-	height: 36px;
+  height: 36px;
 }
 .w36 {
-	width: 36px;
+  width: 36px;
 }
 .w40 {
-	width: 40px;
+  width: 40px;
 }
 .w44 {
-	width: 44px;
+  width: 44px;
 }
 .w48 {
-	width: 48px;
+  width: 48px;
 }
 .min-vh100 {
-	min-height: 100vh;
+  min-height: 100vh;
 }
 .vw100 {
-	width: 100vw;
-	min-width: 100%;
+  width: 100vw;
+  min-width: 100%;
 }
 
 /* SPACING HELPERS */
 /* To create new margin classes, multiply by 4px */
 .mt-8 {
-	margin-top: 2rem;
+  margin-top: 2rem;
 }
 .mt-9 {
-	margin-top: 2.25rem;
+  margin-top: 2.25rem;
 }
 .mb-9 {
-	margin-bottom: 2.25rem;
+  margin-bottom: 2.25rem;
 }
 .mt-10 {
-	margin-top: 2.5rem;
+  margin-top: 2.5rem;
 }
 .mb-10 {
-	margin-bottom: 2.5rem;
+  margin-bottom: 2.5rem;
 }
 .my-10 {
-	margin-top: 2.5rem;
-	margin-bottom: 2.5rem;
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
 }
 .mt-12 {
-	margin-top: 3rem;
+  margin-top: 3rem;
 }
 .mb-12 {
-	margin-bottom: 3rem;
+  margin-bottom: 3rem;
 }
 .my-12 {
-	margin-top: 3rem;
-	margin-bottom: 3rem;
+  margin-top: 3rem;
+  margin-bottom: 3rem;
 }
 .mt-13 {
-	margin-top: 3.25rem;
+  margin-top: 3.25rem;
 }
 .mb-13 {
-	margin-bottom: 3.25rem;
+  margin-bottom: 3.25rem;
 }
 .mt-14 {
-	margin-top: 3.5rem;
+  margin-top: 3.5rem;
 }
 .mt-16 {
-	margin-top: 4rem;
+  margin-top: 4rem;
 }
 .mb-16 {
-	margin-bottom: 4rem;
+  margin-bottom: 4rem;
 }
 .mb-18 {
-	margin-bottom: 4.5rem;
+  margin-bottom: 4.5rem;
 }
 .mt-20 {
-	margin-top: 5rem;
+  margin-top: 5rem;
 }
 .mb-20 {
-	margin-bottom: 5rem;
+  margin-bottom: 5rem;
 }
 .my-20 {
-	margin-top: 5rem;
-	margin-bottom: 5rem;
+  margin-top: 5rem;
+  margin-bottom: 5rem;
 }
 .mb-30 {
-	margin-bottom: 7.5rem;
+  margin-bottom: 7.5rem;
 }
 .mt-30 {
-	margin-top: 7.5rem;
+  margin-top: 7.5rem;
 }
 .mt-40 {
-	margin-top: 10rem;
+  margin-top: 10rem;
 }
 .mb-40 {
-	margin-bottom: 10rem;
+  margin-bottom: 10rem;
 }
 .my-40 {
-	margin-top: 10rem;
-	margin-bottom: 10rem;
+  margin-top: 10rem;
+  margin-bottom: 10rem;
 }
 .mb-49 {
-	margin-bottom: 12.25rem;
+  margin-bottom: 12.25rem;
 }
 .mb-50 {
-	margin-bottom: 12.5rem;
+  margin-bottom: 12.5rem;
 }
 .pt-40 {
-	padding-top: 10rem;
+  padding-top: 10rem;
 }
 .pb-40 {
-	padding-bottom: 10rem;
+  padding-bottom: 10rem;
 }
 .pb-50 {
-	padding-bottom: 12.5rem;
+  padding-bottom: 12.5rem;
 }
 .pt-50 {
-	padding-top: 12.5rem;
+  padding-top: 12.5rem;
 }
 .py-50 {
-	padding-bottom: 12.5rem;
-	padding-top: 12.5rem;
+  padding-bottom: 12.5rem;
+  padding-top: 12.5rem;
 }
 .top-10 {
-	top: 2.5rem;
+  top: 2.5rem;
 }
 
 /*  TEXT HELPERS */
 .va-middle {
-	vertical-align: middle;
+  vertical-align: middle;
 }
 .ls-none {
-	list-style: none;
+  list-style: none;
 }
 .no-wrap {
-	white-space: nowrap;
+  white-space: nowrap;
 }
 .align-items-stretch {
-	align-items: stretch;
+  align-items: stretch;
 }
 
-@media only screen and (max-width: 576px) {
-	.overflow-xs {
-		overflow: scroll;
-	}
+@include media-breakpoint-down(xs) {
+  .overflow-xs {
+    overflow: scroll;
+  }
 }
 
 /* COLOR ELEMENTS */
 .border-green {
-	border: 1px solid $primary;
+  border: 1px solid $primary;
 }
 .grey-400 {
-	color: $gray-400
+  color: $gray-400
 }
diff --git a/styles/_landings.scss b/styles/_landings.scss
index fddf007fd5..122532879c 100644
--- a/styles/_landings.scss
+++ b/styles/_landings.scss
@@ -107,7 +107,7 @@
   list-style-type: square;
 }
 
-@media (max-width: 991px) {
+@include media-breakpoint-down(md) {
   .landing .card {
     padding-left: 0px;
   }
diff --git a/styles/_layout.scss b/styles/_layout.scss
index bd2b729b81..a9998e700b 100644
--- a/styles/_layout.scss
+++ b/styles/_layout.scss
@@ -165,7 +165,7 @@ section {
   padding: 48px 0;
 }
 
-@media (max-width: 991px) {
+@include media-breakpoint-down(md) {
   .landing .card-grid .card,
   .landing .card-grid .card-body,
   .landing .card-grid .card-header {
diff --git a/styles/_pages.scss b/styles/_pages.scss
index 59b02c184e..e8da96c876 100644
--- a/styles/_pages.scss
+++ b/styles/_pages.scss
@@ -1,51 +1,51 @@
 /* HOME STYLINGS */
 #home-hero-marker {
-	top: unset;
-	bottom: 64px;
+  top: unset;
+  bottom: 64px;
 }
 #home-hero-marker:after {
-	position: absolute;
-	content: " ➝";
-	box-sizing: initial;
+  position: absolute;
+  content: " ➝";
+  box-sizing: initial;
   animation: arrowDance 1.2s infinite;
 }
 #bg-home-1 {
-	background-image: url(../../img/graphics/home-bg.png);
-	background-repeat: no-repeat;
+  background-image: url(../../img/graphics/home-bg.png);
+  background-repeat: no-repeat;
   background-size: 90%;
   background-position: 90px -180px;
 }
-@media only screen and (max-width: 992px) {
-	#bg-home-1 {
-		background-size: cover;
-	}
+@include media-breakpoint-down(md) {
+  #bg-home-1 {
+    background-size: cover;
+  }
 }
 .hc {
-	background: black;
-	padding: 2.25rem 1.875rem 7.75rem;
-	color: $white;
-	background-position: bottom;
-	background-repeat: no-repeat;
-	background-size: 100% 70px;
-	@media (max-width: 991px) {
-	  padding-left: 2rem !important;
-	}
+  background: black;
+  padding: 2.25rem 1.875rem 7.75rem;
+  color: $white;
+  background-position: bottom;
+  background-repeat: no-repeat;
+  background-size: 100% 70px;
+  @include media-breakpoint-down(md) {
+    padding-left: 2rem !important;
+  }
 }
 .hc .h2 {
-	height: 38px;
-	padding-bottom: 5rem;
+  height: 38px;
+  padding-bottom: 5rem;
 }
 #hc-1 {
-	background-image: url(../../img/graphics/hc-1.png);
-	border: 1px solid #FAFF1A;
+  background-image: url(../../img/graphics/hc-1.png);
+  border: 1px solid #FAFF1A;
 }
 #hc-2 {
-	background-image: url(../../img/graphics/hc-2.png);
-	border: 1px solid #FF1A8B;
+  background-image: url(../../img/graphics/hc-2.png);
+  border: 1px solid #FF1A8B;
 }
 #hc-3 {
-	background-image: url(../../img/graphics/hc-3.png);
-	border: 1px solid #974CFF;
+  background-image: url(../../img/graphics/hc-3.png);
+  border: 1px solid #974CFF;
 }
 @keyframes arrowDance {
   0% { padding-left: 7px; }
@@ -57,49 +57,49 @@
 
 
 #hero-impact {
-	width: 100vw;
+  width: 100vw;
 }
-@media only screen and (min-width: 768px) {
+@include media-breakpoint-up(md) {
   #hero-impact {
-		margin-top: -120px;
-	}
+    margin-top: -120px;
+  }
 }
 #page-impact-bg {
-	background-image: url(../img/backgrounds/bg-impact-top.png);
-	background-repeat: no-repeat;
+  background-image: url(../img/backgrounds/bg-impact-top.png);
+  background-repeat: no-repeat;
   background-position: center 250px;
   background-size: contain;
 }
 #page-business-bg {
-	background-image: url(../img/backgrounds/bg-business-mid.png);
-	background-repeat: no-repeat;
-	background-position: right 72.5%;
+  background-image: url(../img/backgrounds/bg-business-mid.png);
+  background-repeat: no-repeat;
+  background-position: right 72.5%;
 }
 #page-business-top {
-	position: absolute;
-	left: 0;
+  position: absolute;
+  left: 0;
 }
 #page-business-bot {
-	position: absolute;
-	left: 0;
-	margin-top: -505px;
+  position: absolute;
+  left: 0;
+  margin-top: -505px;
   z-index: -1;
 }
 #page-exchanges-bg {
-	background-image: url(../img/backgrounds/bg-exchanges-top.png);
-	background-repeat: no-repeat;
-	background-position: left 25%;
+  background-image: url(../img/backgrounds/bg-exchanges-top.png);
+  background-repeat: no-repeat;
+  background-position: left 25%;
 }
 #page-exchanges-bot {
-	position: absolute;
-	right: 0;
-	margin-top: -446px;
+  position: absolute;
+  right: 0;
+  margin-top: -446px;
   z-index: -1;
 }
 
 .page-wallets {
   #main_content_body {
-	  background: url(../img/backgrounds/bg-wallets-bot.png) bottom right no-repeat;
+    background: url(../img/backgrounds/bg-wallets-bot.png) bottom right no-repeat;
   }
 
   .fullwidth-bg {
@@ -108,33 +108,33 @@
 }
 
 #page-wallets-bot {
-	position: absolute;
-	right: 0;
-	margin-top: -778px;
+  position: absolute;
+  right: 0;
+  margin-top: -778px;
   z-index: -1;
 }
 #page-contribute-bot {
-	position: absolute;
-	right: 0;
-	margin-top: -199px;
+  position: absolute;
+  right: 0;
+  margin-top: -199px;
   z-index: -1;
 }
 #page-overview-bg {
-	background-image: url(../img/backgrounds/bg-overview-top.png);
-	background-repeat: no-repeat;
-	background-position: right 0;
+  background-image: url(../img/backgrounds/bg-overview-top.png);
+  background-repeat: no-repeat;
+  background-position: right 0;
 }
 
 #page-history-bg {
-	background-image: url(../img/backgrounds/bg-history-mid.png);
-	background-repeat: no-repeat;
-	background-position: right 60%;
+  background-image: url(../img/backgrounds/bg-history-mid.png);
+  background-repeat: no-repeat;
+  background-position: right 60%;
 }
 
 #page-history-top {
-	position: absolute;
-	left: 0;
-	top: 302px;
+  position: absolute;
+  left: 0;
+  top: 302px;
 }
 
 .sustainability-bg {
@@ -155,150 +155,150 @@
 .page-calculator {
   /* CALCULATOR STYLING */
   #data-selector li a {
-  	background: #22252B;
-  	padding: 0.5rem 1.3rem;
-  	color: $white;
-  	white-space: nowrap;
-  	font-weight: normal;
+    background: #22252B;
+    padding: 0.5rem 1.3rem;
+    color: $white;
+    white-space: nowrap;
+    font-weight: normal;
   }
   #data-selector li:nth-child(2) {
-  	margin-left: -7px;
-  	margin-right: -7px;
+    margin-left: -7px;
+    margin-right: -7px;
   }
   #data-selector li.active a {
-  	background: $primary;
-  	color: $black;
+    background: $primary;
+    color: $black;
   }
   .tab-content div {
-  	display: none;
+    display: none;
   }
   .d-output {
-  	display: none;
-  	margin: 0 12px;
-  	max-width: 188px;
-  	width: 33%;
-  	@media only screen and (max-width: 992px) {
-  		width: auto;
-  	}
+    display: none;
+    margin: 0 12px;
+    max-width: 188px;
+    width: 33%;
+    @include media-breakpoint-down(md) {
+      width: auto;
+    }
   }
   .d-output.active {
-  	display: block;
-  	animation-fill-mode: forwards;
-  	animation: fadeIn 1s ease-in-out;
-  	@media only screen and (max-width: 992px) {
-  		display: inline-block;
-  	}
+    display: block;
+    animation-fill-mode: forwards;
+    animation: fadeIn 1s ease-in-out;
+    @include media-breakpoint-down(md) {
+      display: inline-block;
+    }
   }
 
   @media only screen and (min-width: 576px) and (max-width: 1200px){
-  	#data-selector li:nth-child(2) {
-  		margin-left: 0;
-  		margin-right: 0;
-  		border-top: 1px solid $black;
-  		border-bottom: 1px solid $black;
-  	}
+    #data-selector li:nth-child(2) {
+      margin-left: 0;
+      margin-right: 0;
+      border-top: 1px solid $black;
+      border-bottom: 1px solid $black;
+    }
   }
-  @media only screen and (max-width: 576px) {
-  	.d-output {
-  		display: none;
-  		width: auto;
-  		max-width: 100%;
-  	}
-  	.viz-wrapper {
-  		margin-bottom: 2.5rem;
-  		margin-right: 1rem;
-  	}
-  	.d-output[data-comp="kWh"].active {
-  		display: inline-flex;
-  	}
-  	#data-selector li:nth-child(2) {
-  		margin-left: 0;
-  		margin-right: 0;
-  		border-top: 1px solid $black;
-  		border-bottom: 1px solid $black;
-  	}
+  @include media-breakpoint-down(xs) {
+    .d-output {
+      display: none;
+      width: auto;
+      max-width: 100%;
+    }
+    .viz-wrapper {
+      margin-bottom: 2.5rem;
+      margin-right: 1rem;
+    }
+    .d-output[data-comp="kWh"].active {
+      display: inline-flex;
+    }
+    #data-selector li:nth-child(2) {
+      margin-left: 0;
+      margin-right: 0;
+      border-top: 1px solid $black;
+      border-bottom: 1px solid $black;
+    }
   }
-  @media only screen and (max-width: 992px) {
-  	#calculator-inputs-offset.offset {
-  		height: 248px;
-  		width: 100%;
-  	}
-  	#calculator-inputs-offset {
-  		height: 0;
-  		width: 100%;
-  	}
-  	.d-output {
-  		margin: 16px;
-  	}
-  	#calculator-mobile-toggle.show {
-  		position: fixed;
-  		top: 15px;
-  		right: 15px;
-  		z-index: 9999999;
-  	}
-  	#calculator-mobile-toggle.hide {
-  		display: none;
-  	}
-  	#calculator-inputs.sticky {
-  		position: fixed;
-  		top: 72px;
-  		width: calc(100% - 30px);
-  		left: 15px;
-  		right: 15px;
-  		background: $black;
-  		display: none;
-  	}
-  	#calculator-inputs.sticky.show .calc-inputs-wrapper {
-  		display: block;
-  		margin-bottom: 1.5rem;
-  	}
-  	#calculator-inputs.sticky.show {
-  		display: block;
-  	}
+  @include media-breakpoint-down(md) {
+    #calculator-inputs-offset.offset {
+      height: 248px;
+      width: 100%;
+    }
+    #calculator-inputs-offset {
+      height: 0;
+      width: 100%;
+    }
+    .d-output {
+      margin: 16px;
+    }
+    #calculator-mobile-toggle.show {
+      position: fixed;
+      top: 15px;
+      right: 15px;
+      z-index: 9999999;
+    }
+    #calculator-mobile-toggle.hide {
+      display: none;
+    }
+    #calculator-inputs.sticky {
+      position: fixed;
+      top: 72px;
+      width: calc(100% - 30px);
+      left: 15px;
+      right: 15px;
+      background: $black;
+      display: none;
+    }
+    #calculator-inputs.sticky.show .calc-inputs-wrapper {
+      display: block;
+      margin-bottom: 1.5rem;
+    }
+    #calculator-inputs.sticky.show {
+      display: block;
+    }
   }
   .viz-wrapper {
-  	position: relative;
-  	height: 204px;
-  	width: 184px;
-  	overflow: hidden;
-  	border-radius: 10px;
+    position: relative;
+    height: 204px;
+    width: 184px;
+    overflow: hidden;
+    border-radius: 10px;
   }
   .viz-wrapper img {
-  	margin-left: -1px;
-  	margin-right: -1px;
+    margin-left: -1px;
+    margin-right: -1px;
   }
   @keyframes fadeIn {
     0% { opacity: 0 }
     100% { opacity: 1 }
   }
   .dot {
-  	height: 2px;
-  	width: 2px;
-  	border-radius: 50%;
-  	background-color: red;
-  	position: absolute;
-  	z-index: -1;
-  	top: 98px;
-  	left: 68px;
-  	transform-origin: center center;
+    height: 2px;
+    width: 2px;
+    border-radius: 50%;
+    background-color: red;
+    position: absolute;
+    z-index: -1;
+    top: 98px;
+    left: 68px;
+    transform-origin: center center;
   }
   #kWh-btc-dot {
-  	background-color: #FF671A;
+    background-color: #FF671A;
   }
   #kWh-eth-dot {
-  	background-color: #4F5664;
+    background-color: #4F5664;
   }
   #kWh-xrp-dot {
-  	background-color: $primary;
+    background-color: $primary;
   }
   #kWh-pap-dot {
   }
 
   .dash:before {
-  	content: url(../img/icons/dash-line.png);
-  	position: absolute;
-  	top: -12px;
-  	margin-left: 13px;
+    content: url(../img/icons/dash-line.png);
+    position: absolute;
+    top: -12px;
+    margin-left: 13px;
   }
 
 
@@ -359,8 +359,8 @@
     cursor: pointer; /* Cursor on hover */
   }
   input[type="range"] {
-  	background: $primary;
-  	height: 3px;
+    background: $primary;
+    height: 3px;
   }
 
   /** FF*/
diff --git a/styles/_tables.scss b/styles/_tables.scss
index 5337a958d6..5226b45646 100644
--- a/styles/_tables.scss
+++ b/styles/_tables.scss
@@ -1,52 +1,52 @@
 /* TABLE STYLING */
 .dblue {
-	color: #656E81;
+  color: #656E81;
 }
 #table-overview {
-	td:nth-child(1){
-		width: 40%;
-	}
+  td:nth-child(1){
+    width: 40%;
+  }
 }
 #calculator-table {
-	width: 100%;
-	thead {
-		border-bottom: 3px solid $white;
-	}
-	td {
-		padding: 0.25rem 0.5rem;
-		line-height: 1;
-		@media only screen and (max-width: 768px) {
-			font-size: $base-size;
-		}
-	}
-	tbody td {
-		padding: 2rem 0.5rem;
-	}
-	tbody tr {
-		border-bottom: 1px solid $white;
-	}
-	td:first-child{
-		width: 40%;
-	}
-	.ratio {
-		font-size: .075rem;
-		color: #656E81;
-	}
-	@media only screen and (max-width: 992px) {
-		.ratio {
-			display: block;
-		}
-		table {
-			font-size: 0.875rem;
-		}
-		table .fs-5-5 {
-			font-size: 1rem !important;
-		}
-		table .fs-6 {
-			font-size: 1.125rem;
-		}
-		table td:first-child {
-			width: auto;
-		}
-	}
-}
\ No newline at end of file
+  width: 100%;
+  thead {
+    border-bottom: 3px solid $white;
+  }
+  td {
+    padding: 0.25rem 0.5rem;
+    line-height: 1;
+    @include media-breakpoint-down(sm) {
+      font-size: $base-size;
+    }
+  }
+  tbody td {
+    padding: 2rem 0.5rem;
+  }
+  tbody tr {
+    border-bottom: 1px solid $white;
+  }
+  td:first-child{
+    width: 40%;
+  }
+  .ratio {
+    font-size: .075rem;
+    color: #656E81;
+  }
+  @include media-breakpoint-down(md) {
+    .ratio {
+      display: block;
+    }
+    table {
+      font-size: 0.875rem;
+    }
+    table .fs-5-5 {
+      font-size: 1rem !important;
+    }
+    table .fs-6 {
+      font-size: 1.125rem;
+    }
+    table td:first-child {
+      width: auto;
+    }
+  }
+}
diff --git a/styles/_top-nav.scss b/styles/_top-nav.scss
index 08f4beceaf..2cd8312c5a 100644
--- a/styles/_top-nav.scss
+++ b/styles/_top-nav.scss
@@ -49,7 +49,7 @@
       line-height: 125%;
       margin-top: .5rem;
     }
-    @media(max-width: 991px) {
+    @include media-breakpoint-down(md) {
       .wrap-button {
         padding: 1.5rem 0;
 
@@ -95,7 +95,7 @@
     }
   }
   // Desktop version
-  @media(min-width: 992px) {
+  @include media-breakpoint-up(lg) {
     .dropdown-toggle::after {
       border-width: 0;
       top: 80%;
@@ -148,7 +148,7 @@
 
   // Search bar & controls -----------------------------------------------------
   #navbar-search {
-    @media(min-width: 992px) {
+    @include media-breakpoint-up(lg) {
       position: static; // allows search bar to be positioned screen-center
       .dropdown-toggle {
         position: relative;
@@ -227,7 +227,7 @@
   }
 
   // Mobile --------------------------------------------------------------------
-  @media (max-width: 991px) {
+  @include media-breakpoint-down(md) {
     .navbar-brand {
       padding-left: 15px;
     }