/* poster */
.poster {
	position: sticky;
	top: 0;
	width: 100%;
	min-height: 100dvh;
	opacity: 1;
	transition: opacity .5s ease-out;
	will-change: opacity;
}

.poster article {
	position: relative;
	width: 100%;
	min-height: 100dvh;
}

.poster figure {
	position: sticky;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100dvh;
	margin: 0;
	overflow: hidden;
	aspect-ratio: auto;
}
.poster figure .overlay {
	position: absolute;
	top: 50%;
	left: 9%;
	z-index: 1;
	width: 27%;
	height: 80%;
	transform: translateY(-50%);
	background: linear-gradient(
		0deg,
		rgb(var(--n) / 1) 0%,
		rgb(var(--c1) / 1) 100%
	);
	mix-blend-mode: multiply;
}

.poster figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

	.poster .artxt {
		position: absolute;
		top: 50%;
		left: 9%;
		z-index: 2;
		width: 27%;
		padding: 3rem;
		overflow: visible;
		transform: translateY(-50%);
		gap: 0;
	}

	.poster .artxt dt h2{
		width: 200%;
		padding: 0;
		overflow-x: visible;
	}

	.poster .artxt dd {
		width: 100%;
	}

/* poster mobile */
@media (max-width: 767px) {
	.poster {
		position: relative;
		width: 100%;
		max-width: 100vw;
		overflow: hidden;
	}

	.poster article {
		z-index: 1;
		width: 100%;
		overflow: hidden;
	}
	
	.poster figure .overlay {
		position: absolute;
		top: 50%;
		left: 3%;
		z-index: 1;
		width: 72%;
		height: auto;
		min-height: 70%;
		transform: translateY(-50%);
		background: linear-gradient(
			0deg,
			rgb(var(--n) / 1) 0%,
			rgb(var(--c1) / 1) 100%
		);
		mix-blend-mode: multiply;
		box-sizing: border-box;
	}

	.poster .artxt {
		position: absolute;
		top: 50%;
		left: 3%;
		z-index: 2;
		width: 72%;
		padding: 1.5rem 1.25rem;
		transform: translateY(-50%);
		gap: 0;
		box-sizing: border-box;
	}

	.poster .artxt dt h2 {
		width: 130%;
	}

}