/* Widget "Immagine con cornice" */
.mp-framed {
	--mp-framed-height: 500px;
	--mp-framed-radius: 15px;
	--mp-framed-color: #b2905a;
	--mp-framed-offset: 24px;
	--mp-framed-motion: 0px;
	--mp-p: .5;
	--mp-dx: 1;
	--mp-dy: 1;
	position: relative;
	height: var(--mp-framed-height);
}
.mp-framed--bottom-left { --mp-dx: -1; }
.mp-framed--top-right { --mp-dy: -1; }
.mp-framed--top-left { --mp-dx: -1; --mp-dy: -1; }

.mp-framed__frame,
.mp-framed__media {
	position: absolute;
	inset: 0;
	will-change: transform;
}
.mp-framed__frame {
	--mp-move: calc(var(--mp-framed-motion) * (.5 - var(--mp-p)));
	--mp-sx: calc(var(--mp-framed-offset-x, var(--mp-framed-offset)) + var(--mp-move));
	--mp-sy: calc(var(--mp-framed-offset-y, var(--mp-framed-offset)) + var(--mp-move));
	border: 1px solid var(--mp-framed-color);
	border-radius: calc(var(--mp-framed-radius) + 4px);
	transform: translate(calc(var(--mp-sx) * var(--mp-dx)), calc(var(--mp-sy) * var(--mp-dy)));
}
.mp-framed--fill .mp-framed__frame {
	background: var(--mp-framed-color);
	border-radius: calc(var(--mp-framed-radius) * 2);
}
.mp-framed__media {
	--mp-shift: calc(var(--mp-framed-motion) * .5 * (var(--mp-p) - .5));
	border-radius: var(--mp-framed-radius);
	overflow: hidden;
	transform: translate(calc(var(--mp-shift) * var(--mp-dx)), calc(var(--mp-shift) * var(--mp-dy)));
}
.mp-framed__media a,
.mp-framed__media img {
	display: block;
	width: 100%;
	height: 100%;
}
.mp-framed__media img {
	object-fit: cover;
	max-width: none;
	border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mp-framed { --mp-p: .5 !important; }
}