<section class="cards">
   <article>
      <div>
         <h2>Header</h2>
         <p>Lorem ipsum dolor sit amet, cu soluta concludaturque vim, summo voluptatibus ex sea. Est id aperiri offendit vulputate, legere malorum est et. Zril volutpat sit id, no aeterno apeirian mei.</p>
      </div>
   </article>
   
   <article>
      <div>
         <h2>Header</h2>
         <p>Lorem ipsum dolor sit amet, cu soluta concludaturque vim, summo voluptatibus ex sea. Est id aperiri offendit vulputate, legere malorum est et. Zril volutpat sit id, no aeterno apeirian mei.</p>
      </div>
   </article>
   
   <article>
      <div>
         <h2>Header</h2>
         <p>Lorem ipsum dolor sit amet, cu soluta concludaturque vim, summo voluptatibus ex sea. Est id aperiri offendit vulputate, legere malorum est et. Zril volutpat sit id, no aeterno apeirian mei.</p>
         </div>
   </article>
   
   <article>
      <div>
         <h2>Header</h2>
         <p>Lorem ipsum dolor sit amet, cu soluta concludaturque vim, summo voluptatibus ex sea. Est id aperiri offendit vulputate, legere malorum est et. Zril volutpat sit id, no aeterno apeirian mei.</p>
      </div>
   </article>

   <article>
      <div>
         <h2>Header</h2>
         <p>Lorem ipsum dolor sit amet, cu soluta concludaturque vim, summo voluptatibus ex sea. Est id aperiri offendit vulputate, legere malorum est et. Zril volutpat sit id, no aeterno apeirian mei.</p>
      </div>
   </article>
   
   <article>
      <div>
         <h2>Header</h2>
         <p>Lorem ipsum dolor sit amet, cu soluta concludaturque vim, summo voluptatibus ex sea. Est id aperiri offendit vulputate, legere malorum est et. Zril volutpat sit id, no aeterno apeirian mei.</p>
      </div>
   </article>
</section>

body {
   margin:0px;
   margin-right: 30px;
   margin-bottom: 30px;
}

.cards {
   display: flex;
   flex-wrap: wrap;
}

.cards article {
   width: 33.3%;
   box-sizing: border-box; 
}

.cards article div {
/*    background: #F0F0F0; */
   padding: 20px;
   margin: 30px 0px 0px 30px;
   border: dotted 1px #CCC;
}


@media only screen and (max-width: 1000px) {
   .cards article {
      width: 50%;
   }
   .cards article div {
      margin: 20px 0px 0px 20px;
   }
}

@media only screen and (max-width: 600px) {
   .cards article {
      width: 100%;
   }
   .cards article div {
      margin: 10px 0px 0px 10px;
   }
}