flexboxカード型レイアウト

<ul class="cardList">
  <li class="cardList__item">
    <a href="#" class="card">
      <div class="card__thumb"><img src="img/dmy_thumb01@2x.jpg" alt=""></div>
      <p class="card__txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
    </a>
  </li>
  <!-- <li>繰り返し -->
</ul>

.container {
  max-width: 1440px;
  margin: 30px auto;
	padding: 0 20px;
}

/*----------------------------------------
	Card
----------------------------------------*/
.card {
	display: block;
	border: 1px solid #e7e7e7;
	border-radius: 5px;
	color: inherit;
	text-decoration: none;
	transition: color .3s;
}
.card__thumb {
	overflow: hidden;
}
.card__thumb img {
	max-width: none;
	width: 100%;
	border-radius: 5px 5px 0 0;
	transition: transform .3s;
}
.card__txt {
	margin: 20px;
}
/*hover*/
.card:hover {
	color: tomato;
}
.card:hover .card__thumb img {
	transform: scale(1.1);
}

/*----------------------------------------
	CardList
----------------------------------------*/
.cardList {
	display: flex; /*flexbox化*/
	flex-direction: column;/* 縦並びにする*/
	margin-top: -20px; /*1行目の上マージンを相殺*/
}
.cardList__item {
	margin-top: 20px;
}

/*2カラム*/
@media screen and (min-width: 768px) {
	.cardList {
		flex-direction: row; /*横並びにする*/
		justify-content: space-between; /*アイテムを両端に揃えて均等配置*/
		flex-wrap: wrap; /*折り返して複数行にする*/
	}
	.cardList__item {
		width: calc((100% - 20px) / 2); /*アイテムの幅を指定*/
	}
}

/*3カラム*/
@media screen and (min-width: 992px) {
	.cardList__item {
		width: calc((100% - 40px) / 3);
	}
	.cardList::after { /*最終行を左詰めにする*/
		content: "";
		display: block;
		width:  calc((100% - 40px) / 3);
	}
}

/*4カラム*/
@media screen and (min-width: 1200px) {
	.cardList__item {
		width: calc((100% - 60px) / 4);
	}
	.cardList::before,
	.cardList::after { /*最終行を左詰めにする*/
		content: "";
		display: block;
		width: calc((100% - 60px) / 4);
	}
	.cardList::before {
		order: 1;  /*before疑似要素を末尾に移動*/
	}
}