@property --mwpd-fade-size {
	syntax: "<length>";
	inherits: false;
	initial-value: 60px;
}

.mwpd {
	--mwpd-lines: 5;
	--mwpd-lh: 1.8;
	--mwpd-fade: 60px;
	--mwpd-speed: 400ms;
	--mwpd-title-gap: 12px;
	inline-size: 100%;
}

.mwpd .mwpd__title {
	margin-block: 0 var(--mwpd-title-gap);
}

.mwpd .mwpd__viewport {
	--mwpd-fade-size: var(--mwpd-fade);
	position: relative;
	overflow: hidden;
	max-block-size: calc(var(--mwpd-lines) * var(--mwpd-lh) * 1em);
	line-height: var(--mwpd-lh);
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--mwpd-fade-size)), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - var(--mwpd-fade-size)), transparent 100%);
	transition: max-block-size var(--mwpd-speed) ease, --mwpd-fade-size var(--mwpd-speed) ease;
}

.mwpd .mwpd__content p,
.mwpd .mwpd__content li,
.mwpd .mwpd__content div,
.mwpd .mwpd__content span {
	line-height: inherit;
}

.mwpd .mwpd__content > :first-child {
	margin-block-start: 0;
}

.mwpd .mwpd__content > :last-child {
	margin-block-end: 0;
}

.mwpd.is-expanded .mwpd__viewport {
	max-block-size: none;
	--mwpd-fade-size: 0px;
}

.mwpd.is-static .mwpd__viewport,
.mwpd.is-open .mwpd__viewport {
	-webkit-mask-image: none;
	mask-image: none;
}

.mwpd.is-static .mwpd__viewport {
	max-block-size: none;
}

.mwpd .mwpd__actions[hidden] {
	display: none;
}

.mwpd .mwpd__button {
	display: inline-block;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.mwpd .mwpd__viewport,
	.mwpd .mwpd__button {
		transition: none;
	}
}