added dynamic illustration

app.vue

@@ -64,13 +64,15 @@ async function runMutation(payload) {
 		<h1>Liste de naissance</h1>
 		<section class="intro sidebar--reverse" data-direction="rtl">
 			<article v-html="homepage.content" class="editorial" />
-			<img
-				src="~/assets/images/jungle.jpg"
+			<div>
+				<NuxtImg
+					:src="`https://contenu.liste-bebe-macia-capde.fr/assets/${homepage.illustration.id}.`"
+					width="900"
+					height="563"
 					class="intro__image"
-				width="400"
-				height="600"
 					alt=""
 				/>
+			</div>
 		</section>
 		<hr />
 		<SortFilter :onSort="sortList" :onDisplay="toggleDisplay" />
@@ -96,19 +98,15 @@ h1 {
 	text-align: center;
 }
 .intro {
-	--sidebar-target-width: 400px;
-	--sidebar-target-grow: 0;
+	--sidebar-target-width: 500px;
 	margin: var(--space-m-l) auto;
 	max-inline-size: 90ch;
 	align-items: center;
 	justify-content: center;
 }
 .intro__image {
+	margin-inline: auto;
 	mix-blend-mode: multiply;
-	filter: brightness(110%);
-	height: 600px;
-	width: 400px;
-	object-fit: cover;
 }
 hr {
 	margin-block: var(--space-xs-s);

queries/singles/homepage.gql

@@ -2,5 +2,8 @@ query getHomepage {
 	homepage {
 		date_updated
 		content
+		illustration {
+			id
+		}
 	}
 }