$mobile: 600px;
$tablet: 1024px;

@mixin breakpoint-mobile {
	@media screen and (max-width: $mobile) {
		@content;
	}
}

@mixin breakpoint-not-mobile {
	@media screen and (min-width: $mobile) {
		@content;
	}
}

@mixin breakpoint-tablet {
	@media screen and (min-width: $mobile) and (max-width: $tablet) {
		@content;
	}
}

@mixin breakpoint-not-tablet {
	@media screen and (max-width: $mobile), (min-width: $tablet) {
		@content;
	}
}

@mixin breakpoint-desktop {
	@media screen and (min-width: $tablet) {
		@content;
	}
}

@mixin breakpoint-not-desktop {
	@media screen and (max-width: $tablet) {
		@content;
	}
}