$navBarSize: 40px;

@mixin mobile {
	@media (max-width: 700px) {
		@content;
	}
}

@mixin max-screen($size) {
	@media (max-width: #{$size}) {
		@content;
	}
}

@mixin max-container($size) {
	@container (max-width: #{$size}) {
		@content;
	}
}

@mixin small-container {
	@container (max-width: 500px) {
		@content;
	}
}

@mixin medium-container {
	@container (max-width: 800px) {
		@content;
	}
}

@mixin large-container {
	@container (max-width: 1000px) {
		@content;
	}
}

@mixin xlarge-container {
	@container (max-width: 1200px) {
		@content;
	}
}