<div class="container">
	<div class="mini-card">
		<div class="image"></div>
		<div class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quod quaerat harum dolore debitis minus voluptatem possimus nulla?</div>
	</div>
	
	<div class="mini-card">
		<div class="image"></div>
		<div class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quod quaerat harum dolore debitis minus voluptatem possimus nulla?</div>
	</div>
</div>

<div class="container">
	<div class="mini-card">
		<div class="image"></div>
		<div class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quod quaerat harum dolore debitis minus voluptatem possimus nulla?</div>
	</div>
	<div class="mini-card">
		<div class="image"></div>
		<div class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quod quaerat harum dolore debitis minus voluptatem possimus nulla?</div>
	</div>
	<div class="mini-card">
		<div class="image"></div>
		<div class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quod quaerat harum dolore debitis minus voluptatem possimus nulla?</div>
	</div>
	<div class="mini-card">
		<div class="image"></div>
		<div class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quod quaerat harum dolore debitis minus voluptatem possimus nulla?</div>
	</div>
</div>

<div class="container">
	<div class="mini-card">
		<div class="image"></div>
		<div class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quod quaerat harum dolore debitis minus voluptatem possimus nulla?</div>
	</div>
	<div class="mini-card">
		<div class="image"></div>
		<div class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quod quaerat harum dolore debitis minus voluptatem possimus nulla?</div>
	</div>
	<div class="mini-card">
		<div class="image"></div>
		<div class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quod quaerat harum dolore debitis minus voluptatem possimus nulla?</div>
	</div>
</div>

<div class="container">
	<div class="mini-card">
		<div class="image"></div>
		<div class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quod quaerat harum dolore debitis minus voluptatem possimus nulla?</div>
	</div>
</div>

/* If the amount of items is above 3 */
/* Change the layout direction */
.container > :nth-last-child(n+3),
.container > :nth-last-child(n+3) ~ * {
	flex-direction: column;
}

/* And change the image height and color */
.container > :nth-last-child(n+3) .image,
.container > :nth-last-child(n+3) ~ * .image {
	height: 120px;
	background: salmon;
}





/* Demo decoration */
.container {
	display: flex;
	width: 800px;
	margin: 1em auto;
}
.mini-card {
	display: flex;
	width: 400px;
	max-width: 100%;
	margin: 1em;
	border: 2px solid #eee;
	border-radius: 8px;
	overflow: hidden;
}

.image {
	min-width: 150px;
	background: turquoise;
}

.text {
	font-size: .875em;
	line-height: 1.55;
	padding: 8px;
}