.flex, .cards, .card {
  display: flex;
}

.flex {
  flex-wrap:wrap;
}

.cards, .card {
  align-items:center;
}

.cards {
  padding: 1em;
  background-color: $color-lightest;
  box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07);
}

@media screen and (min-width: 480px) {
  .cards {
    width: 49%;
    margin: 1%;
  }

  .cards:nth-of-type(even) {
    margin-right: 0;
  }

  .cards:nth-of-type(odd) {
    margin-left: 0;
  }
}

@media screen and (min-width: 1024px) {
  .cards {
    width: 32%;
    margin: 1%;
  }

  .cards:nth-of-type(3n) {
    margin-right: 0;
  }

  .cards:nth-of-type(3n+1) {
    margin-left: 0;
  }
}