.cards {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/*.cards::after {
  content: '';
  flex: auto;
}
*/

.card {
  flex: 0 1 24%;
  box-shadow: 0 0.125rem 0.187rem 0 rgba(0,0,0,0.1);
  transition: 0.3s;
  margin: 1rem 0.5rem 0rem 0.5rem;

  text-decoration: none;
  color: black;
}

.card:hover {
  box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2);
}

.card_content {
  padding: 0.125rem 1rem 1rem;
}

.card img {
  width: 100%;
  display: block;
}

@media only screen and (max-width: 960px) {
  .card {
    flex: 0 1 46%;
  }
}

@media only screen and (max-width: 600px) {
  .card {
    flex: 0 1 98%;
  }
}