<div class="container mt-3">
	<div class="row row-cols-1 row-cols-md-3 g-4">
		<div class="col">
			<div class="card h-100">
				<img src="://0" class="card-img-top text-center" alt="Mountain Scene" >
				<div class="card-body">
					<h5 class="card-title">A post w/ no image.</h5>
					<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
				</div>
			</div>
		</div>
		<div class="col">
			<div class="card h-100">
				<img src="https://picsum.photos/250/140" class="card-img-top text-center" alt="...">
				<div class="card-body">
					<h5 class="card-title">A post with image.</h5>
					<p class="card-text">This is a short card.</p>
				</div>
			</div>
		</div>
		<div class="col">
			<div class="card h-100">
				<img src="https://picsum.photos/250/140" class="card-img-top text-center" alt="...">
				<div class="card-body">
					<h5 class="card-title">A post with image.</h5>
					<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
				</div>
			</div>
		</div>
		<div class="col">
			<div class="card h-100">
				<img src="https://picsum.photos/250/140" class="card-img-top text-center" alt="...">
				<div class="card-body">
					<h5 class="card-title">A post with image.</h5>
					<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
				</div>
			</div>
		</div>
	</div>
</div>

.card img{position:relative;display:block;}
.card img:after {
	content: "";
	display: block;
	aspect-ratio: 16 / 9;
}
.card img:before{
	content:"Placeholder";
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
  font-size: 2rem;
	text-shadow:1px 1px rgba(0,0,0,0.5);
	color: #fff;
	display: block;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-image: repeating-conic-gradient(
			from 0 at 100% 100%,
			rgba(255, 255, 255, 0.7) 0% 2deg,
			transparent 0 9deg
		),
		radial-gradient(
			circle 150px at 100% 100%,
			white,
			yellow,
			lightyellow,
			rgba(46, 181, 229, 0.8)
		);
	background-color: #2eb5e5;
	background-position: 100% 100%;
	background-size: cover;
	background-repeat: no-repeat;
} 

/* This is not working well enough cross browser to be of any use */