<h1>Visualising breakpoints</h1>
<p>Resize your browser window to see the breakpoint values change.</p>
* {
	box-sizing: border-box;
}

$medium: 40em;
$large: 50em;
$xlarge: 65em;

body {
	padding: 3em 1em;
	
	@media (min-width: $medium) {
		--bp: '#{$medium}, medium';
		--bg: red;
	}
	
	@media (min-width: $large) {
		--bp: '#{$large}, large';
		--bg: orange;
	}
	
	@media (min-width: $xlarge) {
		--bp: '#{$xlarge}, large';
		--bg: yellow;
	}
}

body::after {
	content: var(--bp, 'small');
	background-color: var(--bg, darkSlateGrey);
	padding: 1em;
	position: absolute;
	top: 0;
	left: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.