/**
 * Tilted image
 *
 * Add `rc-tilt` to an Image block (Advanced → Additional CSS class(es)) to sit
 * it at a slight angle with a drop shadow. It straightens on hover.
 *
 * Add `rc-tilt-light` alongside it when the image sits on a DARK section — that
 * swaps the shadow to a white glow, which is what shows up against black.
 *
 * The tilt only applies from 769px up. On phones the image is full width and a
 * rotation would push it past the edge of its column.
 */

@media (min-width: 769px) {
	.rc-tilt {
		box-shadow: 10px 10px 30px rgba(0, 0, 0, .25);
		transform: rotate(-5deg);
		transition: transform .3s ease, box-shadow .3s ease;
	}

	.rc-tilt:hover {
		box-shadow: 15px 15px 40px rgba(0, 0, 0, .35);
		transform: rotate(0deg);
	}

	/* On a dark background a black shadow is invisible — glow instead. */
	.rc-tilt-light {
		box-shadow: 10px 10px 30px rgba(255, 255, 255, .2);
	}

	.rc-tilt-light:hover {
		box-shadow: 15px 15px 40px rgba(255, 255, 255, .3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rc-tilt {
		transition: none;
	}
}