.ww-gw-preview {
	--heading-font-size: 1.875rem;
	--container-gap: 1.5rem;
	--container-full-inline-buffer: 0rem;

	--container-padding-block: 1.875rem;

	background-color: #07b1e9;
	padding-block: var(--container-padding-block);

	.container--full {
		display: grid;
		gap: var(--container-gap);
	}

	h2 {
		font-family: var(--fonts-montserrat);
		font-weight: 500;
		font-size: var(--heading-font-size);
		line-height: 100%;
		letter-spacing: 0%;
		text-align: center;
		color: var(--colors-white);
	}

	.before,
	.after {
		margin: 0;
	}

	.before picture,
	.before picture img,
	.after picture,
	.after picture img {
		display: block;
		max-width: 100%;
		width: 100%;
	}

	.before figcaption,
	.after figcaption {
		background: var(--colors-black);
		border-radius: 12px;
		color: var(--colors-white);
		opacity: 0.8;
		padding: 0.75rem;
		position: absolute;
		bottom: 1rem;
		line-height: 100%;
	}

	.before figcaption {
		left: 1rem;
	}

	.after figcaption {
		right: 1rem;
	}

	img-comparison-slider {
		--divider-width: 2px;
	}

	img-comparison-slider:focus-within {
		cursor: ew-resize;
	}
}

@media (width >=768px) {
	.ww-gw-preview {
		--container-gap: 2rem;
		--container-padding-block: 5rem;

		--heading-font-size: 2.5rem;
		--container-full-inline-buffer: unset;
	}
}