.c-green-standard  {
	--color-green: #2aa946 ;
	--color-lime: #bad040;
	--color-white: #ffffff;
	--color-black: #1d1d1b;

	:is(h1,h2,h3,h4,h5,p,li) {
		font-family:Lato,sans-serif;
	}
	:is(h1,h2,h3,h4,h5) {
		color: var(--color-green) ;
	}

	.c-green-standard--hero  {
		position: relative;
		container: c-green-standard--hero / inline-size;

		color: var(--color-white) ;
		&:after {
			content:"";

			display:block;
			width: 50vw ;
			height:100%;

			position:absolute;
			top:0;
			left:0;
			z-index:102;

			background: var(--color-green);
		}

		.c-green-standard--hero__internal  {
			display: grid ;
			max-width: var(--width) ;
			margin: 0 auto ;

			padding: 15px ;

			overflow: hidden;

			position: relative;
			z-index: 115 ;
			grid-template: auto auto / 100%  ;

			@container (width > 766px) {
				grid-template: auto / 50% 50% ;
			}
			@container (width > 1416px) {
				overflow: visible;
			}

			&:before {
				content:"";

				display:block;
				height:100%;
				border-radius:0 ;

				position:absolute;
				top:0;
				right: -35px;
				left:0;
				z-index:110;

				background:var(--color-green);

				@container (width > 1416px) {
					border-radius:0 0 100px 0;
				}
			}


			.c-green-standard--hero__content  {
				display: flex ;
				flex-flow: column wrap ;

				position: relative;
				z-index: 200 ;

				font-size: 30px;
				font-weight: 600;
				place-items: start;
        		place-content: center;
				padding-inline-end: 1em ;
				:is(h1,h2,h3,h4,h5) {
					color:var(--color-white) ;
				}
			}
			.c-green-standard--hero__image  {
				position: relative;
				z-index: 200 ;
				.image-wrapper {
					display: flex;
					padding-inline: 0px ;

					margin: -45px 0 ;
					svg , img  {
						max-width: calc( 100% - 0px ) ;
						aspect-ratio: 1 / 1;

						position: relative;
						right: -75px;
					}
				}
			}
		}
	}
	.c-green-standard--text-image {
		container: c-green-standard--text-image / inline-size;

		.c-green-standard--text-image__internal {
			display: grid ;
			max-width: var(--width) ;
			margin: 50px auto ;
			padding: 25px 75px 25px 25px ;

			position: relative;
			z-index: 100 ;
			grid-template: auto / 100% ;

			line-height: 265% ;

			@container (width > 766px) {
				grid-template: auto / 57.5% 42.5% ;

				padding: 0px ;
			}

			.c-green-standard--text-image__content {
				display: flex;
				flex-flow: column ;

				position: relative ;

				color: var(--color-black) ;
				font-size: 26px;
				place-content: start center ;
				padding-inline: 75px 25px;

				@container (width > 766px) {
					padding-inline: 75px 0px;
				}

				a  {
					color: var(--color-lime);
					font-weight: bold ;;
				}
				&:before {
					content: "";

					display: block;
					width: 40px;
					height: 70px;

					position: absolute;
					top: 0px;
					left: 5px;
					z-index: 125;

					background-color: var(--color-white) ;
					background-image: url(/app/themes/willerby/assets/green_standard/plug-even.svg);
					background-repeat: no-repeat;
					background-size: contain;
				}

				:after {
					content: "";

					display: block;
					width: 2px;
					margin: 0 auto;

					position: absolute;
					top: 75px;
					bottom: 0px;
					left: 21px;
					z-index: 120 ;

					background: var(--color-green) ;
				}

			}
			.c-green-standard--text-image__image {
				display: none ;
				place-items: start;
				place-content: end;

				@container (width > 766px) {
					display: flex;
				}
			}
		}
	}
	.c-green-standard--text  {
		position: relative;
		container: c-green-standard--text / inline-size;

			&:after {
				content:"";

				display: none ;
				width: 50vw ;
				height:100%;

				position:absolute;
				top:0;
				right:0;
				z-index:105;

				background-color: var(--color-lime);
				background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTQxIDQ3OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjcwLjUgMTYyLjQ0OUg1NDBWMUgyNzAuNUMxMjEuNjQ0IDEgMSAxMDkuNDA3IDEgMjQzLjE2NFY0NzdoMjY5LjVDNDE5LjMzNSA0NzcgNTQwIDM3Ni45MjIgNTQwIDI0My4xNjR2LTI3LjcxMUgyNzAuNWMtMzguNzg0IDYuNDI5LTM0LjI5OSA1NC4yMTMtMzQuMjk5IDU0LjIxM0g0NzguOTJjLTE0LjM1MiA5MS44ODQtMTAyLjE5MiAxNTQuMjUzLTIwOC4zOTkgMTU0LjI1M0g2MC4wNTFWMjQzLjE2NGMwLTEwNC40MzQgOTQuMjI2LTE4OS4xMDIgMjEwLjQ0OS0xODkuMTAyaDIxMC40NDl2NTUuMzY0SDI3MC41Yy04Mi4yMDIgMC0xNDguODM1IDU5Ljg3NC0xNDguODM1IDEzMy43Mzh2MTI5LjY3SDI3MC41YzQ4LjQzNyAwIDkxLjQ5Mi0yMC44MDIgMTE4LjY1OC01My4wMDRIMTgwLjY3NHYtNzYuNjY2YzAtNDQuNTc5IDQwLjIxNC04MC43MTUgODkuODI2LTgwLjcxNXYweiIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPjwvc3ZnPg==);
				background-position: calc( 100% + 180px )  50%;
				background-repeat:no-repeat;
				background-size: auto 480px ;

				@container (width > 766px) {
					display: block ;
				}

			}

		.c-green-standard--text__internal  {
			display: grid ;
			max-width: var(--width) ;
			margin: 0 auto ;
			padding: 100px 50px 50px 50px ;

			position: relative;
			z-index: 110 ;

			color: var(--color-white) ;
			line-height: 265% ;
			text-shadow: -1px -1px 1px var(--color-lime) , 1px 1px 1px var(--color-lime) ;
			grid-template: auto / 100%  ;

			@container (width > 766px) {
				padding: 100px 150px 100px 100px ;
			}

			&:before {
				content:"";

				display:block;
				height:100%;
				border-radius:100px 0 0 0;

				position:absolute;
				top:0;
				right: 0;
				left:0;
				z-index:105;

				background: var(--color-lime);

				@container (width > 766px) {
					right: 50%;
				}
			}


			.c-green-standard--text__content  {
				position:relative;
				z-index:115;

				:is(h1,h2,h3,h4,h5,p,li) {
					color: var(--color-white) ;
				}
				:is(p,li) {
					margin: 0 ;
					padding: 5px 0 15px;

					font-size: 26px;
					font-weight: bold ;
				}
			}
		}
	}
	.c-green-standard--simple  {
		color: var(--color-white);

		background: var(--color-green);

		.c-green-standard--simple__internal  {
			display: block ;
			max-width: var(--width) ;
			margin: 0 auto ;
			padding: 50px 25px 25px;

			position: relative;
			z-index: 100 ;
			p  {
				margin-bottom: 1rem;

				font-size: 1rem ;
			}
		}
	}
}