/* Before/after image comparison (rendered by the before_after shortcode) */

	.before-after {
		margin: 2em 0;
	}

		.ba-frame {
			position: relative;
			width: 100%;
			aspect-ratio: 16 / 10;
			overflow: hidden;
			background-color: #eeeeee;
		}

		.ba-frame img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		.ba-before {
			z-index: 1;
		}

		.ba-after {
			position: absolute;
			inset: 0;
			z-index: 2;
			clip-path: inset(0 0 0 var(--pos, 50%));
			will-change: clip-path;
		}

		.ba-divider {
			position: absolute;
			top: 0;
			bottom: 0;
			left: var(--pos, 50%);
			width: 2px;
			transform: translateX(-50%);
			background-color: #ffffff;
			box-shadow: 0 0 8px rgba(0, 0, 0, 0.45);
			z-index: 3;
			pointer-events: none;
		}

			.ba-divider::after {
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				width: 1.75em;
				height: 1.75em;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.95);
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
			}

		.ba-frame:focus-within {
			outline: 2px solid #742e2e;
			outline-offset: -2px;
		}

		.ba-range {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			opacity: 0;
			cursor: ew-resize;
			z-index: 4;
			-webkit-appearance: none;
			appearance: none;
		}