SCSS: use breakpoint mixins, avoid tabs

styles/_buttons.scss

@@ -52,15 +52,13 @@ p + .readmore {
   font-weight: 700;
   z-index: 1000;
   color: white;
-}
+
-@media screen and (max-width: 767px) {
+  &::after {
-  .jump-to-top {
+    content: " ↑"
+  }
+
+  @include media-breakpoint-down(sm) {
     bottom: 40px;
     right: 40px;
   }
 }
-
-
-.btn.jump-to-top::after {
-  content: " ↑"
-}

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;
-  &-50 {
-    flex-basis: calc(50% - 30px);
-  }
-}
-@media (max-width: 768px) {
-  .square {
-    flex-basis: calc(50% - 30px);
-  }
-}
 
-.square:before {
+  &::before {
     content: '';
     display: block;
     padding-top: 100%;
+  }
+
+  &-50 {
+    flex-basis: calc(50% - 30px);
+  }
+
+  @include media-breakpoint-up(lg) {
+    flex-basis: calc(25% - 30px);
+  }
 }
+
 .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;
   }

styles/_helpers.scss

@@ -143,7 +143,7 @@
   align-items: stretch;
 }
 
-@media only screen and (max-width: 576px) {
+@include media-breakpoint-down(xs) {
   .overflow-xs {
     overflow: scroll;
   }

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;
   }

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 {

styles/_pages.scss

@@ -15,7 +15,7 @@
   background-size: 90%;
   background-position: 90px -180px;
 }
-@media only screen and (max-width: 992px) {
+@include media-breakpoint-down(md) {
   #bg-home-1 {
     background-size: cover;
   }
@@ -27,7 +27,7 @@
   background-position: bottom;
   background-repeat: no-repeat;
   background-size: 100% 70px;
-	@media (max-width: 991px) {
+  @include media-breakpoint-down(md) {
     padding-left: 2rem !important;
   }
 }
@@ -59,7 +59,7 @@
 #hero-impact {
   width: 100vw;
 }
-@media only screen and (min-width: 768px) {
+@include media-breakpoint-up(md) {
   #hero-impact {
     margin-top: -120px;
   }
@@ -177,7 +177,7 @@
     margin: 0 12px;
     max-width: 188px;
     width: 33%;
-  	@media only screen and (max-width: 992px) {
+    @include media-breakpoint-down(md) {
       width: auto;
     }
   }
@@ -185,7 +185,7 @@
     display: block;
     animation-fill-mode: forwards;
     animation: fadeIn 1s ease-in-out;
-  	@media only screen and (max-width: 992px) {
+    @include media-breakpoint-down(md) {
       display: inline-block;
     }
   }
@@ -198,7 +198,7 @@
       border-bottom: 1px solid $black;
     }
   }
-  @media only screen and (max-width: 576px) {
+  @include media-breakpoint-down(xs) {
     .d-output {
       display: none;
       width: auto;
@@ -218,7 +218,7 @@
       border-bottom: 1px solid $black;
     }
   }
-  @media only screen and (max-width: 992px) {
+  @include media-breakpoint-down(md) {
     #calculator-inputs-offset.offset {
       height: 248px;
       width: 100%;

styles/_tables.scss

@@ -15,7 +15,7 @@
   td {
     padding: 0.25rem 0.5rem;
     line-height: 1;
-		@media only screen and (max-width: 768px) {
+    @include media-breakpoint-down(sm) {
       font-size: $base-size;
     }
   }
@@ -32,7 +32,7 @@
     font-size: .075rem;
     color: #656E81;
   }
-	@media only screen and (max-width: 992px) {
+  @include media-breakpoint-down(md) {
     .ratio {
       display: block;
     }

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;
     }