<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;
}