[class*="vb-background-shape"] {
	--bg-shape-ht-offset: 0px;
	--bg-shape-wt-offset: 0px;
	--bg-shape-bg: red;

	--bg-shape-lt: 50px;
	--bg-shape-rt: 50px;

	--bg-shape-rd-tl: 20px;
	--bg-shape-rd-tr: 20px;
	--bg-shape-rd-bl: 20px;
	--bg-shape-rd-br: 20px;
 	--bg-shape-br-wt:5px;
	position: absolute;
	display: flex;
	inset-inline: 0;
	width: calc(100% + var(--bg-shape-wt-offset));
	margin-inline-start: calc(var(--bg-shape-wt-offset) / -2);
	block-size: auto;
	inset-block-start: 0;
	inset-block-end: calc(var(--bg-shape-ht-offset) * -1);
	container-type: size;
	--bg-shape-br-wt:0px;
	z-index:-1;
}

[class*="vb-background-shape"]::before {
	content: "";
 	position: absolute;
	inset: var(--bg-shape-br-wt);
	background: var(--bg-shape-bg);
	width:calc(100% - (var(--bg-shape-br-wt) * 2));
	height:calc(100% - (var(--bg-shape-br-wt) * 2));
}
[class*="vb-background-shape"]::after{
	content: "";
 	position: absolute;
}

.vb-background-shape-cut-top {
	inset-block-start: calc(var(--bg-shape-ht-offset) * -1);
	inset-block-end: 0;
}

.vb-background-shape-cut-bottom {
	inset-block-start: 0;                                   
	inset-block-end: calc(var(--bg-shape-ht-offset) * -1);
	transform: scaleY(-1);
}

[class*="vb-background-shape-cut"]::before {
  
 	--cut-lt: var(--bg-shape-lt);
	--cut-rt: var(--bg-shape-rt);
	--cut-tl: min(var(--bg-shape-rd-tl), 45cqh);
	--cut-tr: min(var(--bg-shape-rd-tr), 45cqh);
	--cut-bl: min(var(--bg-shape-rd-bl), 45cqh);
	--cut-br: min(var(--bg-shape-rd-br), 45cqh);
	--f-tl: tan(atan2(var(--cut-tl), max(1px, 100cqh)));
	--f-tr: tan(atan2(var(--cut-tr), max(1px, 100cqh)));
	--f-bl: tan(atan2(var(--cut-bl), max(1px, 100cqh)));
	--f-br: tan(atan2(var(--cut-br), max(1px, 100cqh)));
	clip-path: shape(
		from 0 100%,
		line to 100% 100%,
		curve to calc(100% - var(--cut-br) - var(--cut-rt) * var(--f-br)) calc(100% - var(--cut-br))
			with calc(100% - var(--cut-br)) 100%,
		line to calc(100% - var(--cut-br) - var(--cut-rt) * (1 - var(--f-tr))) var(--cut-tr),
		curve to calc(100% - var(--cut-br) - var(--cut-rt) - var(--cut-tr)) 0
			with calc(100% - var(--cut-br) - var(--cut-rt)) 0,
		line to calc(var(--cut-bl) + var(--cut-lt) + var(--cut-tl)) 0,
		curve to calc(var(--cut-bl) + var(--cut-lt) * (1 - var(--f-tl))) var(--cut-tl)
			with calc(var(--cut-bl) + var(--cut-lt)) 0,
		line to calc(var(--cut-bl) + var(--cut-lt) * var(--f-bl)) calc(100% - var(--cut-bl)),
		curve to 0 100% with var(--cut-bl) 100%
	);
}

.vb-background-shape-cut-bottom::before {
	--cut-tl: min(var(--bg-shape-rd-bl), 45cqh);
	--cut-tr: min(var(--bg-shape-rd-br), 45cqh);
	--cut-bl: min(var(--bg-shape-rd-tl), 45cqh);
	--cut-br: min(var(--bg-shape-rd-tr), 45cqh);
}
@supports not (clip-path: shape(from 0 0, line to 10px 10px)) {
	[class*="vb-background-shape-cut"]::before {
		clip-path: polygon(
			0 100%,
			100% 100%,
			calc(100% - var(--cut-br)) calc(100% - var(--cut-br)),
			calc(100% - var(--cut-br) - var(--cut-rt)) var(--cut-tr),
			calc(100% - var(--cut-br) - var(--cut-rt) - var(--cut-tr)) 0,
			calc(var(--cut-bl) + var(--cut-lt) + var(--cut-tl)) 0,
			calc(var(--cut-bl) + var(--cut-lt)) var(--cut-tl),
			var(--cut-bl) calc(100% - var(--cut-bl))
		);
	}
}