CSS problème retour ligne texte dans bloc position absolute

Bonjour,

J'ai un petit soucis avec lequel je m'arrache les cheveux depuis quelques jours. J'ai une <figure> en position relative, le <figcaption> de cette figure est en position absolute, et dans ce figcaption j'ai un <h2>. Lorsque le titre dépasse la largeur de la figure celui-ci ne passe pas à la ligne et reste sur une seule ligne en se chevauchant... très moche. J'ai essayé toutes les modifications possibles sur le css de la figure, de la figcaption, et du titre (position, width, height...)... rien à faire.

<nav id="anchor_backTop">
			<a href="" title="">
				<figure>
					<img src="img/idea_1800x1800.jpg" alt="Un concept inédit qui est imaginé par l'entreprise <?php echo strip_tags($string_nameOfTheCompany); ?>." />
					<img src="img/bubble_1800x1800.png" alt="" />
					<img src="img/bubble_450x450.png" alt="" />
					<img src="img/bubble_300x300.png" alt="" />
					<img src="img/bubble_150x150.png" alt="" />
					<img src="img/bubble_150x150.png" alt="" />
					<img src="img/bubble_150x150.png" alt="" />
					<img src="img/bubble_150x150.png" alt="" />
					<img src="img/bubble_150x150.png" alt="" />
					<img src="img/bubble_150x150.png" alt="" />
					<figcaption>
						<h2>
							Un concept inédit
						</h2>
					</figcaption>
				</figure>
			</a>
</nav>

/* CSS spécifique à la navigation de la page. */
nav {
	/* GRID (display) */
	display: -ms-grid;
	display: grid;
	/* -------------- */
	/* GRID (définition des colonnes) */
	-ms-grid-columns: repeat(3, auto) 5% repeat(3, auto);
	grid-template-columns: repeat(3, auto) 5% repeat(3, auto);
	/* ------------------------------ */
	width: 90%;
	margin-right: auto;
	margin-bottom: 50px;
	margin-left: auto;
	font-family: Arial, Georgia, serif;
	font-size: x-large;
}

/* CSS spécifique au lien de la page "concept.php". */
nav > :first-child {
	/* GRID (positionnement sur les colonnes) */
	-ms-grid-column: 2;
	-ms-grid-column-span: 2;
	grid-column: 2/4;
	/* -------------------------------------- */
	/* GRID (positionnement sur les lignes) */
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
	grid-row: 1/3;
	/* ------------------------------------ */
}

/* CSS spécifique aux figures des liens. */
nav figure { position: relative; }

/* CSS spécifique au figcaption. */
nav figure > :last-child {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	text-align: center;
	color: rgba(170, 0, 170, 1);
	opacity: 1;
	/* TRANSITION */
	-webkit-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
	/* ---------- */
}

/* CSS spécifique aux titres <h2>. */
nav h2 {
    margin: 0;
    font-size: 2.5em;
}