title: Styling every 3rd and 4th item
body: <p>I have an array of items that should be displayed as cards. Every 3rd and 4th item should be wider than the others (pattern: narrow - narrow - <strong>wide</strong> - <strong>wide</strong> - narrow - narrow - <strong>wide</strong> - <strong>wide</strong>... and so on). What I tried so far:</p>
  
  <pre><code>.card {
      &amp;:nth-child(1n) {width: 33%;}
      &amp;:nth-child(2n) {width: 33%;}
      &amp;:nth-child(3n) {width: 66%;}
      &amp;:nth-child(4n) {width: 66%;}
  }
  </code></pre>
  
  <p>Of course this only works for the first 4 items. I want to be able to use this for an infinite amount of items though.
  I could figure it out neither with <code>&amp;:nth-child(3n)</code> and similar stuff.</p>
  
  <p>Is it possible to solve this with a css grid?</p>