.ypl-o-title {
	--ypl-o-closed-width: .75em;
	--ypl-o-open-width: 430px;
	--ypl-o-effective-open-width: var(--ypl-o-open-width);
	--ypl-o-height: .92em;
	--ypl-o-part-width: .38em;
	--ypl-o-duration: 1.2s;
	position: relative;
	width: 100%;
}

.ypl-o-title__sticky { position: relative; display: flex; width: 100%; }
.ypl-o-title__heading {
	display: flex;
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: .9;
}
.ypl-o-title__composition {
	display: inline-flex;
	flex: 0 1 auto;
	flex-direction: column;
	max-width: 100%;
}
.ypl-o-title__main-line {
	display: flex;
	align-items: center;
	width: max-content;
	max-width: 100%;
}
.ypl-o-title__before-leading,
.ypl-o-title__after-trailing {
	display: flex;
	position: relative;
	z-index: 2;
	white-space: normal;
}
.ypl-o-title--align-flex-start .ypl-o-title__before-leading,
.ypl-o-title--align-flex-start .ypl-o-title__after-trailing { text-align: left; }
.ypl-o-title--align-flex-start .ypl-o-title__main-line { align-self: flex-start; }
.ypl-o-title--align-center .ypl-o-title__before-leading,
.ypl-o-title--align-center .ypl-o-title__after-trailing { text-align: center; }
.ypl-o-title--align-center .ypl-o-title__main-line { align-self: center; }
.ypl-o-title--align-flex-end .ypl-o-title__before-leading,
.ypl-o-title--align-flex-end .ypl-o-title__after-trailing { text-align: right; }
.ypl-o-title--align-flex-end .ypl-o-title__main-line { align-self: flex-end; }
.ypl-o-title__before,
.ypl-o-title__after {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	white-space: normal;
}
.ypl-o-title__animated-word {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	white-space: nowrap;
}
.ypl-o-title__after-context {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	margin-inline-start: .25em;
}
.ypl-o-title__letter {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	width: var(--ypl-o-closed-width);
	height: var(--ypl-o-height);
	overflow: hidden;
	transition: width var(--ypl-o-duration) cubic-bezier(.65, 0, .35, 1);
	will-change: width;
}
.ypl-o-title__part {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	width: var(--ypl-o-part-width);
	height: var(--ypl-o-height);
	transform: translateY(-50%);
}
.ypl-o-title__part--left { left: 0; justify-content: flex-start; }
.ypl-o-title__part--right { right: 0; justify-content: flex-end; }
.ypl-o-title__part--left img { transform: translateX(4px); }
.ypl-o-title__part--right img { transform: translateX(-4px); }
.ypl-o-title__part img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
	pointer-events: none;
}
.ypl-o-title__inside-line {
	display: block;
	max-width: 100%;
	text-wrap: balance;
}
.ypl-o-title__inside {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: calc(var(--ypl-o-effective-open-width) - (var(--ypl-o-part-width) * 2));
	max-width: calc(var(--ypl-o-effective-open-width) - (var(--ypl-o-part-width) * 2));
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, calc(-50% + 10px));
	transition: opacity calc(var(--ypl-o-duration) * .4) ease, transform calc(var(--ypl-o-duration) * .4) ease, visibility 0s linear var(--ypl-o-duration);
	text-align: center;
	white-space: normal;
	line-height: 1.15;
	pointer-events: none;
}
.ypl-o-title.is-open .ypl-o-title__letter,
.ypl-o-title--opened .ypl-o-title__letter { width: var(--ypl-o-effective-open-width); }
.ypl-o-title.is-open .ypl-o-title__inside,
.ypl-o-title--opened .ypl-o-title__inside {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%);
	transition-delay: calc(var(--ypl-o-duration) * .4), calc(var(--ypl-o-duration) * .4), 0s;
}

@media (min-width: 768px) {
	.ypl-o-title__before { margin-right: -.12em; }
	.ypl-o-title__after { margin-left: -.12em; }
}
@media (max-width: 767px) {
	.ypl-o-title__composition {
		width: 100%;
	}
	.ypl-o-title__main-line {
		box-sizing: border-box;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		padding-inline: 15px;
		row-gap: .12em;
	}
	.ypl-o-title__before { margin-right: -.18em; }
	.ypl-o-title__after { margin-left: -.18em; }
	.ypl-o-title__after-context { white-space: nowrap; }
	.ypl-o-title__main-line {
		--ypl-o-mobile-open: min(var(--ypl-o-effective-open-width), var(--ypl-o-mobile-limit, 100vw));
	}
	.ypl-o-title__letter {
		max-width: var(--ypl-o-mobile-open);
	}
	.ypl-o-title__inside {
		/* Keep the final text width throughout the opening, without resizing the text. */
		width: max(0px, calc(var(--ypl-o-mobile-open) - (var(--ypl-o-part-width) * 2)));
		max-width: none;
	}
	.ypl-o-title.is-open .ypl-o-title__inside {
		transition-delay: calc(var(--ypl-o-duration) * .5), calc(var(--ypl-o-duration) * .5), 0s;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ypl-o-title__letter,
	.ypl-o-title__inside { transition: none; }
	.ypl-o-title--animated .ypl-o-title__letter { width: var(--ypl-o-effective-open-width); }
	.ypl-o-title--animated .ypl-o-title__inside { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
}