<main>

	<section>
		<h2>Sample Section</h2>
		<p>
			This card uses a relatively simple CSS calculation to rescale <code>margin</code>, <code>padding</code>, <code>font-size</code>, and <code>border-radius</code> between a minimum and maximum size based on screen width.
		</p><p>
			No LESS/SASS/SCSS rubbish, no NPM package trash, just flipping do it with <code>calc</code>, <code>min</code>, <code>max</code> and some native CSS variables. 
		</p>
	</section>
	
</main>

* { margin:0; padding:0; }

body {
    background:#DEF;
}

main {
	overflow:auto;
	display:flex;
	align-items:center;
	justify-content:center;
  min-height:100vh;
}

p {
	margin:1.5em 0;
}

section *:last-child {
	margin-bottom:0;
}

pre, code, samp, kbd {
	font:normal 1em/1.2em consolas,monospace;
	color:#084;
}

:root {
	--base-scale:calc(100vw / 75);
	--h2-font-size:max(1em, min(4em, calc(var(--base-scale) * 4)));
	--padding-size:max(1em, min(2em, calc(var(--base-scale) * 2)));
	--margin-size:max(0.5em, min(2em, calc(var(--base-scale) * 2)));
	--border-radius:max(1em, min(3em, calc(var(--base-scale) * 3)));
}

main section {
	max-width:40em;
	padding:var(--padding-size);
	margin:var(--margin-size);
	border-radius:var(--border-radius);
	background:#FFF;
	border:1px solid #0484;
}

h2 {
	font-size:var(--h2-font-size);
	line-height:1.2;
}