title: styled-components render unique CSS per iteration
body: <p>Currently I'm using styled-components to manage height based on screen size.  However, I'm having a problem because it's not evaluating each div individually.  All CSS is being rendered based on the maximum size.  This is making gaps between smaller items larger and throwing off the formatting.</p>
  <pre><code>export const ColumnContainer = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    flex-shrink: 0;
    max-width: 687.5px;
    margin-bottom: 0px;
    padding-left: 1%;
    padding-right: 1%
  
    @media (min-width: 768px){
      margin-right: 0px;
      margin-bottom: ${px2vw(2)};
      width: ${px2vw(325, 768)};
    }
  `;
  
  export const CardBox = styled.div`
    display: flex;
    width: ${px2vw(500, 500)};
    min-height: ${px2vw(200, 500)};
    padding-top: ${px2vw(20)};
    padding-bottom: 0;
    margin-left: 3%;
    max-width: 102%;
    height: 100%;
    padding-right: 0px;
    flex-basis: 200px;
  
    @media (min-width: 768px) {
      width: ${px2vw(320, 768)};
      min-height: ${px2vw(200, 768)};
      padding-bottom: ${px2vw(20)};
      height: 100%;
      margin-left: 0;
      max-width: 100%;
    }
  
    @media (min-width: 1024px) {
      width: ${px2vw(710)};
      min-height: 30vh;
      padding-bottom: ${px2vw(20)};
      height: 100%;
      flex
    }
  
    &amp; &gt; a{
      color:rgb(94, 92, 92, 1.0);
    }
    
    &amp; &gt; a:hover{
      color:rgba(94, 92, 92, 1.0);
    }
  `;
  </code></pre>
  <h2>Desired Layout</h2>
  <p><a href="https://i.stack.imgur.com/FaT0O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FaT0O.png" alt="Desired layout" /></a></p>
  <h2>Rendered Layout</h2>
  <p><a href="https://i.stack.imgur.com/Vlstk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vlstk.png" alt="Rendered Layout" /></a></p>
  <p>Is there anyway to tell styled-components that I want unique CSS for each object?</p>