/* ==========================================================================
   Module Divi « Duo photos + titre »
   Proportions de la maquette (composition 503 × 285) :
   - grande photo : 74,5 % de large, pleine hauteur
   - petite photo : 31,6 % de large, décalée de 14,4 % vers le bas,
     chevauche la grande de 6 %
   - titre : bas de la grande photo, déborde sur la petite
   Tout est en % / cqw : la composition est identique à toutes les tailles.
   ========================================================================== */

.pbd_image_duo {
	--pbd-title-x: 0%;
	--pbd-title-y: 0%;
}

.pbd_image_duo .pbd-duo {
	position: relative;
	container-type: inline-size;
	width: 100%;
	aspect-ratio: 503 / 285;
}

.pbd_image_duo .pbd-main,
.pbd_image_duo .pbd-small {
	position: absolute;
	overflow: hidden;
}

.pbd_image_duo .pbd-main {
	z-index: 1;
	top: 0;
	left: 0;
	width: 74.5%;
	height: 100%;
}

.pbd_image_duo .pbd-small {
	z-index: 2;
	top: 14.4%;
	left: 68.4%;
	width: 31.6%;
	height: 72.3%;
}

.pbd_image_duo .pbd-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* --- Titre ---------------------------------------------------------------- */

.pbd_image_duo .pbd-title {
	position: absolute;
	z-index: 3;
	top: calc(76% + var(--pbd-title-y));
	left: calc(12.3% + var(--pbd-title-x));
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	font-family: silverknife, serif;
	font-size: clamp(24px, 9.2cqw, 120px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .01em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}

.pbd_image_duo .pbd-title--white { color: #fff; }
.pbd_image_duo .pbd-title--navy  { color: #1D2245; }

/* --- Miroir : petite photo à gauche --------------------------------------- */

.pbd_image_duo .pbd-duo--mirror .pbd-main  { left: auto; right: 0; }
.pbd_image_duo .pbd-duo--mirror .pbd-small { left: auto; right: 68.4%; }
.pbd_image_duo .pbd-duo--mirror .pbd-title {
	left: auto;
	right: calc(12.3% - var(--pbd-title-x));
}