Save

SCSS/mixins.scss

@@ -1,57 +1,32 @@
 //MEDIA QUERY MANAGER
 
-/*$breakpoint argument choices:
-- phone
-- tab-port
-- tab-land
-- desk
-- big-desktop
-*/
-
 @mixin MediaQuery($breakpoint) {
-	// max-width:768px;
-	@if $breakpoint==phone {
-		@media screen and (max-width: 768px) {
+	@if $breakpoint==sm {
+		@media (min-width: 640px) {
 			@content
 		}
 	}
 
-	@if $breakpoint==tab-p {
-		// min-width:768px;
-		// max-width:900px;
-		@media screen and (min-width: 768px) and (max-width: 900px) {
+	@if $breakpoint==md {
+		@media (min-width: 768px) {
 			@content
 		}
 	}
 
-	@if $breakpoint==tab-l {
-		// min-width:901px;
-		// max-width:1200px;
-		@media screen and (min-width: 901px) and (max-width: 1200px) {
+	@if $breakpoint==lg {
+		@media (min-width: 1024px) {
 			@content
 		}
 	}
 
-	@if $breakpoint==laptop {
-		// min-width:1201px;
-		// max-width:1366px;
-		@media screen and (min-width: 1201px) and (max-width: 1366px) {
+	@if $breakpoint==xl {
+		@media (min-width: 1280px) {
 			@content
 		}
 	}
 
-	@if $breakpoint==desk {
-		// min-width:1201px;
-		// max-width:1800px;
-		@media screen and (min-width: 1201px) and (max-width: 1800px) {
-			@content
-		}
-	}
-
-	@if $breakpoint==big-d {
-		// min-width:1801px;
-		// max-width:4000px;
-		@media screen and (min-width: 1801px) and (max-width: 4000px) {
+	@if $breakpoint=="2xl" {
+		@media (min-width: 1536px) {
 			@content
 		}
 	}