title: How to bring elements closer together as the screen narrows?
body: <p>I am using negative margin to cause some playing card elements to overlap, creating a visual effect akin to how a hand of playing cards  appear in real life.</p>
  <p>The issue here is that the negative margin is defined in <code>vw</code>. This means that as the screen size widens, the value of a single <code>vw</code> becomes greater, and the negative margin grows, causing the cards to overlap <em>more</em>. This is contradictory to my intentions-- as the screen widens, the cards should spread accordingly, and overlap more as the screen narrows.</p>
  <p>If I instead use an absolute value like <code>px</code>, the overlap will remain constant as the screen size changes, which is also undesirable.</p>
  <p>I have spent many hours trial &amp; erroring this and have yet to come up with a scheme that works correctly.</p>
  <p>How can you cause a negative margin to diminish as the screen increases, with CSS <em>or</em> with JS if CSS can't do it alone?</p>