How to prevent text from overlapping on images?

Card Design
1

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 ?

HTML

HTML:

<div class=question>
	{{Q}}
</div>

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

<br><br>

<div>
<div class=réponse>
	{{A}}
</div>

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

CSS

.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;
	}