Flexbox Card

card.html

<section class="cards">
        <div class="card">
            <p>Title</p>
            <p>Description</p>
            <a href="#">Link</a>
        </div>
        <div class="card">
            <p>Title</p>
            <p>Description</p>
            <a href="#">Link</a>
        </div>
        <div class="card">
            <p>Title</p>
            <p>This is a really long description as I try to break the grid to see what happens the height of the divs</p>
            <a href="#">Link</a>
        </div>
        <div class="card">
            <p>Title</p>
            <p>Description</p>
            <a href="#">Link</a>
        </div>
        <div class="card">
            <p>Title</p>
            <p>Description</p>
            <a href="#">Link</a>
        </div>
        <div class="card">
            <p>Title</p>
            <p>Description</p>
            <a href="#">Link</a>
        </div>
        <div class="card">
            <p>Title</p>
            <p>Description</p>
            <a href="#">Link</a>
        </div>
        <div class="card">
            <p>Title</p>
            <p>Description</p>
            <a href="#">Link</a>
        </div>
    </section>

flexbox.scss

.cards {
  display: block;
  background: red;

  @media only screen and (min-width: 667px) {
    display: flex;
    flex-wrap: wrap;
  }
}

.card {
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid #ffffff;

  @media only screen and (min-width: 667px) {
    flex: 1 1 0px;
    min-width: 50%;
    background-color: rgba(0, 0, 0, 0.3);
  }

  @media only screen and (min-width: 992px) {
    min-width: 25%;
    background-color: rgba(0, 0, 0, 0.1);
  }
}