.mndg-ids-container {
	position: relative;
	max-width: 100%;
	margin: 0 auto;
	overflow: visible;
}

.mndg-ids-item {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--mndg-item-width, 320px);
	max-width: 90%;
	opacity: 0;
	transform: translate(calc(-50% + var(--offset-x, 0px)), calc(-220% + var(--offset-y, 0px)))
		rotate(0deg)
		scale(0.92);
	transition:
		transform var(--duration, 1200ms) cubic-bezier(0.17, 0.67, 0.2, 1.01) var(--delay, 0ms),
		opacity calc(var(--duration, 1200ms) * 0.45) ease-out var(--delay, 0ms);
	will-change: transform, opacity;
}

.mndg-ids-container.is-visible .mndg-ids-item {
	opacity: 1;
	transform: translate(calc(-50% + var(--offset-x, 0px)), calc(-50% + var(--offset-y, 0px)))
		rotate(var(--angle, 0deg))
		scale(1);
}

/* Fade effect: no falling motion, image is already at its landing spot/angle
   and just fades + settles in with a slight scale. Higher specificity than
   .mndg-ids-item alone, so this overrides the drop transform above. */
.mndg-ids-container.mndg-ids-effect-fade .mndg-ids-item {
	transform: translate(calc(-50% + var(--offset-x, 0px)), calc(-50% + var(--offset-y, 0px)))
		rotate(var(--angle, 0deg))
		scale(0.94);
	transition:
		opacity var(--duration, 1200ms) ease-out var(--delay, 0ms),
		transform var(--duration, 1200ms) ease-out var(--delay, 0ms);
}

.mndg-ids-container.mndg-ids-effect-fade.is-visible .mndg-ids-item {
	transform: translate(calc(-50% + var(--offset-x, 0px)), calc(-50% + var(--offset-y, 0px)))
		rotate(var(--angle, 0deg))
		scale(1);
}

.mndg-ids-item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28), 0 3px 6px rgba(0, 0, 0, 0.15);
}

.mndg-ids-photo {
	display: block;
}

/* Polaroid frame: white card around the photo with extra room at the
   bottom, like a real Polaroid print. The frame carries the shadow
   instead of the image, and sits inside the item's box (border-box)
   so it doesn't grow past item_width. */
.mndg-ids-container.mndg-ids-frame-polaroid .mndg-ids-photo {
	box-sizing: border-box;
	width: 100%;
	background: #fff;
	padding: 2.5% 2.5% 8% 2.5%;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28), 0 3px 6px rgba(0, 0, 0, 0.15);
	border-radius: 2px;
}

.mndg-ids-container.mndg-ids-frame-polaroid .mndg-ids-item img {
	border-radius: 0;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.mndg-ids-item {
		transition: opacity 300ms ease-out var(--delay, 0ms);
		transform: translate(calc(-50% + var(--offset-x, 0px)), calc(-50% + var(--offset-y, 0px)))
			rotate(var(--angle, 0deg));
	}
}