.gallery-hero figure,
.gallery-mosaic figure {
	overflow: hidden;
}

.gallery-managed-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
}

/* L’ouverture de la page Galerie reprend le même cadre paysage que l’accueil.
 * Le plafond évite qu’une photographie verticale devienne démesurée sur les
 * écrans très larges, sans modifier le rendu tablette ou mobile. */
@media (min-width: 1051px) {
	.gallery-hero {
		grid-template-columns: minmax(350px, 41%) 1fr;
	}

	.gallery-hero > div {
		padding: clamp(60px, 8vw, 130px) clamp(30px, 5.5vw, 110px);
	}

	.gallery-hero > figure {
		width: min(100%, 1120px);
		min-height: 0;
		aspect-ratio: 16 / 10;
		align-self: center;
		justify-self: end;
		background: var(--paper-2);
	}
}

/* Le logo fourni par la galerie remplace le mot-symbole typographique dans
 * l’en-tête tout en restant administrable via le logo personnalisé WordPress. */
.brand--image {
	align-items: center;
	align-self: stretch;
	padding-block: 7px;
}

.brand--image .brand-logo {
	width: auto;
	height: 78px;
	max-width: 118px;
	object-fit: contain;
}

/* La marque devient un filigrane discret derrière le récit de la galerie. */
.gallery-story {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.gallery-story > div:not(.gallery-brand-seal) {
	position: relative;
	z-index: 1;
}

.gallery-brand-seal {
	position: absolute;
	right: -2vw;
	top: 50%;
	z-index: 0;
	width: clamp(280px, 34vw, 540px);
	transform: translateY(-50%) rotate(-3deg);
	opacity: .045;
	pointer-events: none;
}

.gallery-brand-seal img {
	width: 100%;
	height: auto;
}

/* Un rythme proche d’un accrochage : les trois photographies ne sont pas
 * contraintes à la même hauteur et le centre descend légèrement. */
@media (min-width: 761px) {
	.gallery-mosaic figure:first-child {
		height: 590px;
	}

	.gallery-mosaic figure:nth-child(2) {
		height: 430px;
		margin-top: 108px;
	}

	.gallery-mosaic figure:nth-child(3) {
		height: 520px;
		margin-top: 34px;
	}
}

@media (max-width: 760px) {
	.brand--image {
		padding-block: 5px;
	}

	.brand--image .brand-logo {
		height: 62px;
		max-width: 92px;
	}

	.gallery-brand-seal {
		right: -22vw;
		width: 470px;
		opacity: .035;
	}
}