<div class="bl_media_container">
  <div class="bl_media_itemWrapper">
    <div class="bl_media_item">
      <div class="img"><img src="https://pengi-n.co.jp/blog/wp-content/uploads/2021/08/cropped-pengin.png" alt=""></div>
      <h3>ダミータイトル</h3>
      <p>ダミーダミーダミーダミーダミーダミー</p>
    </div>
  </div>
  <div class="bl_media_itemWrapper">
    <div class="bl_media_item">
      <div class="img"><img src="https://pengi-n.co.jp/blog/wp-content/uploads/2021/08/cropped-pengin.png" alt=""></div>
      <h3>ダミータイトル</h3>
      <p>ダミーダミーダミーダミーダミーダミー</p>
    </div>
  </div>
  <div class="bl_media_itemWrapper">
    <div class="bl_media_item">
      <div class="img"><img src="https://pengi-n.co.jp/blog/wp-content/uploads/2021/08/cropped-pengin.png" alt=""></div>
      <h3>ダミータイトル</h3>
      <p>ダミーダミーダミーダミーダミーダミー</p>
    </div>
  </div>
  <div class="bl_media_itemWrapper">
    <div class="bl_media_item">
      <div class="img"><img src="https://pengi-n.co.jp/blog/wp-content/uploads/2021/08/cropped-pengin.png" alt=""></div>
      <h3>ダミータイトル</h3>
      <p>ダミーダミーダミーダミーダミーダミー</p>
    </div>
  </div>
  <div class="bl_media_itemWrapper">
    <div class="bl_media_item">
      <div class="img"><img src="https://pengi-n.co.jp/blog/wp-content/uploads/2021/08/cropped-pengin.png" alt=""></div>
      <h3>ダミータイトル</h3>
      <p>ダミーダミーダミーダミーダミーダミー</p>
    </div>
  </div>
<div class="bl_media_itemWrapper">
    <div class="bl_media_item">
      <div class="img"><img src="https://pengi-n.co.jp/blog/wp-content/uploads/2021/08/cropped-pengin.png" alt=""></div>
      <h3>ダミータイトル</h3>
      <p>ダミーダミーダミーダミーダミーダミー</p>
    </div>
  </div>
<div class="bl_media_itemWrapper">
    <div class="bl_media_item">
      <div class="img"><img src="https://pengi-n.co.jp/blog/wp-content/uploads/2021/08/cropped-pengin.png" alt=""></div>
      <h3>ダミータイトル</h3>
      <p>ダミーダミーダミーダミーダミーダミー</p>
    </div>
  </div>
<div class="bl_media_itemWrapper">
    <div class="bl_media_item">
      <div class="img"><img src="https://pengi-n.co.jp/blog/wp-content/uploads/2021/08/cropped-pengin.png" alt=""></div>
      <h3>ダミータイトル</h3>
      <p>ダミーダミーダミーダミーダミーダミー</p>
    </div>
  </div>
<div class="bl_media_itemWrapper">
    <div class="bl_media_item">
      <div class="img"><img src="https://pengi-n.co.jp/blog/wp-content/uploads/2021/08/cropped-pengin.png" alt=""></div>
      <h3>ダミータイトル</h3>
      <p>ダミーダミーダミーダミーダミーダミー</p>
    </div>
  </div>
</div>

* {
	list-style: none;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
img {
	width: 100%;
  height: 250px;
  object-fit: cover;
  background-color: #e0e4eb;
	vertical-align: bottom;
}
/***************************/
/* 変数 */
:root {
	--interval: 30px; /* カード間の余白 */
	--number: 3;      /* カード表示枚数 */
}

@media screen and (max-width: 599px) {
	:root {
		--interval: 30px; /* カード間の余白 */
		--number: 2;      /* カード表示枚数 */
	}
}

@media screen and (max-width: 480px) {
	:root {
		--interval: 40px; /* カード間の余白 */
		--number: 1;      /* カード表示枚数 */
	}
}

/***************************/
.bl_media {
	background: #eff3fc;
}
.bl_media_container {
	display: flex;
	flex-wrap: wrap;
	margin: calc((var(--interval) / -2));
	padding: 30px;
  max-width: 1200px;
  margin: 0 auto;
}
.bl_media_itemWrapper {
	width: calc((100% / var(--number)) - var(--interval));
	/* [100% / 表示させたいカード枚数]  -  [上下左右の枠にかかるマージン] */
	margin: calc((var(--interval) / 2));
	/* カード間の余白(隣接要素との合計になるため1/2を指定) */
}
.bl_media_item {
	outline: 1px solid #000;
	font-size: 1.5vw;
}

h3 , p {
  padding: 1em;
}