Responsive Flexbox Layout

<style>
  *{box-sizing: border-box;}

body {margin:0; background-color:#eee;
  font-family: 'Open Sans', sans-serif;
  font-size: 80%;
}

h1, p {margin: 1em 20px 0;}

.wrapper {
  display: flex; 
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
}

article {
  flex: 1 1 200px;
  min-width: 200px; 
  max-width: 400px;
  border: 1px solid #000;
  padding-bottom: 20px;
}

img {
  width: 100%;
}

.dark-pattern {
  visibility: hidden;
  margin-top: 0;
  margin-bottom: 0;
  padding-top:0;
  padding-bottom: 0;
  border-width-top: 0;
  border-bottom: 0;
}
</style>
<main class="wrapper">
  <article>
    <img src="http://labs.thewebahead.net/images/zeldman2.jpg"><h1>Headline</h1><p>All of these beautiful NYC by photos are <a href="https://www.flickr.com/photos/zeldman">Jeffrey Zeldman</a>.</p>
  </article>

  <article><img src="http://labs.thewebahead.net/images/zeldman1.jpg">
  <h1>At vero eros et accumsan</h1><p>Et iusto odio dignissim qui blandit praesent. Nulla non ipsum condimentum, iaculis tellus et, tristique magna.</p></article>
 
  <article>
  <img src="http://labs.thewebahead.net/images/zeldman5.jpg">
  <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</p></article>
  
  <article>
  <img src="http://labs.thewebahead.net/images/zeldman6.jpg">
  <h1>Luptatum zzril delenit augue</h1><p>Duis dolore te feugait nulla facilisi.</p></article>

  <article><img src="http://labs.thewebahead.net/images/zeldman7.jpg"></article>

  <article><img src="http://labs.thewebahead.net/images/zeldman10.jpg">
  <h1> Duis commodo ex quam</h1>
  <p>Et molestie sapien viverra eu. Vestibulum commodo elit maximus dui egestas lobortis. Nullam fringilla ultricies nulla nec dictum. Suspendisse potenti. Maecenas blandit sollicitudin est, vitae finibus ex dictum id.</p></article>

  <article><img src="http://labs.thewebahead.net/images/zeldman11.jpg">
    <h1>Aenean</h1>
    <p>Mauris magna elit, finibus id accumsan et, eleifend vitae velit. Ut egestas, ante eu iaculis mollis, ipsum est fermentum libero, eu dignissim mauris est sit amet nulla.</p></article>  
  

  <article class="dark-pattern"></article>
  <article class="dark-pattern"></article>
  <article class="dark-pattern"></article>
  <article class="dark-pattern"></article>
  <article class="dark-pattern"></article>
  <article class="dark-pattern"></article>
  <article class="dark-pattern"></article>
  <article class="dark-pattern"></article>
</main>