.cms-mask {
	--cms-mask-url: none;
	--cms-mask-size: contain;
	--cms-mask-position: center;
	--cms-mask-repeat: no-repeat;
	--cms-mask-object-position: center;
	--cms-mask-scale-x: 1;
	--cms-mask-scale-y: 1;
	--cms-mask-rotate: 0deg;
	--cms-mask-translate-x: 0;
	--cms-mask-translate-y: 0;
	--cms-mask-active-url: var(--cms-mask-url);
	--cms-mask-active-rotate: var(--cms-mask-rotate);
	--cms-mask-fallback-radius: 2rem;

	display: block;
	overflow: hidden;
	border-radius: var(--cms-mask-fallback-radius);
	transform:
		translate3d(var(--cms-mask-translate-x), var(--cms-mask-translate-y), 0)
		rotate(var(--cms-mask-active-rotate))
		scaleX(var(--cms-mask-scale-x))
		scaleY(var(--cms-mask-scale-y));
	transform-origin: center;
	-webkit-mask-image: var(--cms-mask-active-url);
	mask-image: var(--cms-mask-active-url);
	-webkit-mask-size: var(--cms-mask-size);
	mask-size: var(--cms-mask-size);
	-webkit-mask-position: var(--cms-mask-position);
	mask-position: var(--cms-mask-position);
	-webkit-mask-repeat: var(--cms-mask-repeat);
	mask-repeat: var(--cms-mask-repeat);
}

.cms-mask > img,
.cms-mask picture > img,
.cms-mask img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--cms-mask-object-position);
	display: block;
}

.cms-mask--responsive {
	--cms-mask-active-url: var(--cms-mask-url-mobile, var(--cms-mask-url));
	--cms-mask-active-rotate: var(--cms-mask-rotate-mobile, var(--cms-mask-rotate));
}

@media (min-width: 760px) {
	.cms-mask--responsive {
		--cms-mask-active-url: var(--cms-mask-url-tablet, var(--cms-mask-url-mobile, var(--cms-mask-url)));
		--cms-mask-active-rotate: var(--cms-mask-rotate-tablet, var(--cms-mask-rotate-mobile, var(--cms-mask-rotate)));
	}
}

@media (min-width: 1200px) {
	.cms-mask--responsive {
		--cms-mask-active-url: var(--cms-mask-url-desktop, var(--cms-mask-url-tablet, var(--cms-mask-url-mobile, var(--cms-mask-url))));
		--cms-mask-active-rotate: var(--cms-mask-rotate-desktop, var(--cms-mask-rotate-tablet, var(--cms-mask-rotate-mobile, var(--cms-mask-rotate))));
	}
}

.cms-mask--blob-soft-01 {
	--cms-mask-url: url("../../svg/masks/blob-soft-01.svg");
	--cms-mask-size: 100% 100%;
	--cms-mask-fallback-radius: 3.5rem;
}

.cms-mask--blob-soft-02 {
	--cms-mask-url: url("../../svg/masks/blob-soft-02.svg");
	--cms-mask-size: 100% 100%;
	--cms-mask-fallback-radius: 3.25rem;
}

.cms-mask--blob-soft-03 {
	--cms-mask-url: url("../../svg/masks/blob-soft-03.svg");
	--cms-mask-size: 100% 100%;
	--cms-mask-fallback-radius: 3.4rem;
}

.cms-mask--blob-soft-04 {
	--cms-mask-url: url("../../svg/masks/blob-soft-04.svg");
	--cms-mask-size: 100% 100%;
	--cms-mask-fallback-radius: 3.15rem;
}

.cms-mask--organic-arch {
	--cms-mask-url: url("../../svg/masks/organic-arch-01.svg");
	--cms-mask-size: 100% 100%;
	--cms-mask-fallback-radius: 4rem;
}

.cms-mask--organic-arch-02 {
	--cms-mask-url: url("../../svg/masks/organic-arch-02.svg");
	--cms-mask-size: 100% 100%;
	--cms-mask-fallback-radius: 4rem;
}

.cms-mask--organic-arch-03 {
	--cms-mask-url: url("../../svg/masks/organic-arch-03.svg");
	--cms-mask-size: 100% 100%;
	--cms-mask-fallback-radius: 4rem;
}

.cms-mask--cover {
	--cms-mask-size: 100% 100%;
}

.cms-mask--contain {
	--cms-mask-size: contain;
}

.cms-mask--rotate-soft-left {
	--cms-mask-rotate: -2.4deg;
}

.cms-mask--rotate-soft-right {
	--cms-mask-rotate: 2.4deg;
}

.cms-mask--rotate-soft-left-wide {
	--cms-mask-rotate: -4.2deg;
}

.cms-mask--rotate-soft-right-wide {
	--cms-mask-rotate: 4.2deg;
}

.cms-mask--rotate-third-turn {
	--cms-mask-rotate: 120deg;
}

.cms-mask--rotate-two-third-turns {
	--cms-mask-rotate: 240deg;
}

.cms-mask--flip-x {
	--cms-mask-scale-x: -1;
}

.cms-mask--lift {
	--cms-mask-translate-y: -0.35rem;
}

.cms-mask--sink {
	--cms-mask-translate-y: 0.35rem;
}

.cms-bg-decor {
	--cms-bg-shape-opacity: 0.12;
	--cms-bg-shape-size: cover;
	--cms-bg-shape-position: center;
	--cms-bg-shape-url: none;
	--cms-bg-mask-url: none;
	--cms-bg-shape-color: transparent;

	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.cms-bg-decor::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--cms-bg-shape-color);
	background-image: var(--cms-bg-shape-url);
	background-repeat: no-repeat;
	background-size: var(--cms-bg-shape-size);
	background-position: var(--cms-bg-shape-position);
	-webkit-mask-image: var(--cms-bg-mask-url);
	mask-image: var(--cms-bg-mask-url);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: var(--cms-bg-shape-size);
	mask-size: var(--cms-bg-shape-size);
	-webkit-mask-position: var(--cms-bg-shape-position);
	mask-position: var(--cms-bg-shape-position);
	opacity: var(--cms-bg-shape-opacity);
	pointer-events: none;
	z-index: 0;
}

.cms-bg-decor > * {
	position: relative;
	z-index: 1;
}

.cms-bg-wave-soft-01 {
	--cms-bg-shape-url: url("../../svg/backgrounds/wave-soft-01.svg");
	--cms-bg-shape-size: min(78rem, 132%) auto;
	--cms-bg-shape-position: left -10rem top -2rem;
	--cms-bg-shape-opacity: 0.12;
}

.cms-bg-wave-soft-02 {
	--cms-bg-shape-url: url("../../svg/backgrounds/wave-soft-02.svg");
	--cms-bg-shape-size: min(72rem, 122%) auto;
	--cms-bg-shape-position: right -8rem bottom -3rem;
	--cms-bg-shape-opacity: 0.11;
}

.cms-bg-topography-soft {
	--cms-bg-shape-url: url("../../svg/backgrounds/topography-soft-01.svg");
	--cms-bg-shape-size: min(42rem, 82%) auto;
	--cms-bg-shape-position: right -2rem top 1.5rem;
	--cms-bg-shape-opacity: 0.18;
}

.cms-pattern-dots-soft-01 {
	--cms-bg-shape-url: url("../../svg/patterns/dots-soft-01.svg");
	--cms-bg-shape-size: 13rem 13rem;
	--cms-bg-shape-position: right 2rem top 2rem;
	--cms-bg-shape-opacity: 0.5;
}

.cms-pattern-dots-soft-02 {
	--cms-bg-shape-url: url("../../svg/patterns/dots-soft-02.svg");
	--cms-bg-shape-size: 15rem 15rem;
	--cms-bg-shape-position: left -1rem bottom 2rem;
	--cms-bg-shape-opacity: 0.44;
}

.cms-pattern-dots-soft-03 {
	--cms-bg-shape-url: url("../../svg/patterns/dots-soft-03.svg");
	--cms-bg-shape-size: 16rem 16rem;
	--cms-bg-shape-position: right 1rem top 3rem;
	--cms-bg-shape-opacity: 0.38;
}

.cms-pattern-dots-soft-04 {
	--cms-bg-shape-url: url("../../svg/patterns/dots-soft-04.svg");
	--cms-bg-shape-size: 18rem auto;
	--cms-bg-shape-position: left 0 bottom 2rem;
	--cms-bg-shape-opacity: 0.46;
}

.cms-pattern-dots-soft-05 {
	--cms-bg-shape-url: url("../../svg/patterns/dots-soft-05.svg");
	--cms-bg-shape-size: 14rem 14rem;
	--cms-bg-shape-position: right -1rem bottom 1rem;
	--cms-bg-shape-opacity: 0.4;
}

.cms-pattern-organic-soft-01 {
	--cms-bg-shape-url: none;
	--cms-bg-mask-url: url("../../svg/patterns/organic-soft-01.svg");
	--cms-bg-shape-size: 16rem 16rem;
	--cms-bg-shape-position: right 2rem top 2rem;
	--cms-bg-shape-color: var(--complutum-primary, #86a343);
	--cms-bg-shape-opacity: 0.55;
}

.cms-pattern-organic-soft-02 {
	--cms-bg-shape-url: none;
	--cms-bg-mask-url: url("../../svg/patterns/organic-soft-02.svg");
	--cms-bg-shape-size: 17rem 17rem;
	--cms-bg-shape-position: left 1rem bottom 2rem;
	--cms-bg-shape-color: var(--complutum-primary, #86a343);
	--cms-bg-shape-opacity: 0.52;
}

@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
	.cms-mask {
		-webkit-mask-image: none;
		mask-image: none;
		border-radius: var(--cms-mask-fallback-radius, 2rem);
	}
}