How to prevent text from overlapping on images?

A card is made of three parts: text A, images, text B.
I want everything to appear centered, one after the other.
However, when there are too many images, text B overlaps the images.

Is there a simple way to achieve what I want ?



<div class=question>

	<div class=img>{{Q_img}}</div>


<div class=réponse>

	<div class=img>{{A_img}}</div>


.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;

.question {font-size: 24px; }
.réponse {font-size: 24px; font-weight: bold; } 

.img	{
	display: block;		margin-left: auto;	margin-right: auto;
	width: auto;		height: auto;		text-align: center;
	max-width: 300px;					max-height: 300px;