css-doodle {
	--dd-banner-image: (
		@grid: 1 / 100%;
		:container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: @p(var(--grasgroen),var(--blauwgroen),var(--donkergroen),var(--lichtgroen));
			-webkit-backface-visibility: hidden;
			-webkit-clip-path: inset(0% round 120px 360px 240px 120px);
			clip-path: inset(0% round 120px 360px 240px 120px);
			border-radius: 120px 360px 240px 120px;
			background-image: @var(--dd-banner-bgimg);
			background-blend-mode: screen;
			background-repeat: no-repeat;
			background-position: @var(--dd-banner-bgpos);
			background-size: @var(--dd-banner-bgsize);
		}
	);
	--dd-banner-flow: (
		@grid: 1 / 100%;
		position: relative;
		:container {
			overflow: hidden;
			background-color: @p(var(--grasgroen),var(--blauwgroen),var(--donkergroen),var(--lichtgroen));
			-webkit-backface-visibility: hidden;
			-webkit-clip-path: inset(0% round 120px 0 0 240px);
			clip-path: inset(0% round 120px 0 0 240px);
			border-radius: 120px 0 0 240px;
		}
		::before {
			content: '';
			position: absolute;
			display: block;
			width: 100%;
			height: 100%;
			inset: 0;
			z-index: 2;
			transform: scale(@p(-1, 1), @p(-1, 1));
			background-image: @p(
				url(/wp-content/themes/generatepress_child/assets/flow/flow-01.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-02.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-03.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-04.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-05.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-06.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-08.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-08.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-09.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-10.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-11.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-12.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-13.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-14.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-15.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-16.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-17.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-18.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-19.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-20.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-21.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-22.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-23.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-24.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-25.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-26.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-27.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-28.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-29.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-30.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-31.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-32.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-33.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-34.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-35.svg),
				url(/wp-content/themes/generatepress_child/assets/flow/flow-36.svg)
            );
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			opacity: @p(.3, .4, .5);
		}
	);
}