:root{
	--pp-offset: clamp(0.6875rem, 0.0625rem + 3.125vw, 2rem);
	--radius: 20px;
}


figure[class*="-image"].is-style-offset-left,
.is-style-offset-left > .wp-block-media-text__media,
figure[class*="-image"].is-style-offset-right,
.is-style-offset-right > .wp-block-media-text__media{
  position:relative;
  display:inline-block;
}

figure[class*="-image"].is-style-offset-left::after,
.is-style-offset-left > .wp-block-media-text__media::after,
figure[class*="-image"].is-style-offset-right::after,
.is-style-offset-right > .wp-block-media-text__media::after{
  content:"" !important;
  position:absolute;
  inset:0;
  background:var(--wp--preset--color--secondary);
	z-index:0 !important;
	border-radius: var(--radius);
	pointer-events: none;
}

figure[class*="-image"].is-style-offset-left > img,
.is-style-offset-left > .wp-block-media-text__media > img,
figure[class*="-image"].is-style-offset-right > img,
.is-style-offset-right > .wp-block-media-text__media > img{
  position:relative;
  z-index:10 !important;
  
}



/* Varianten */
figure[class*="-image"].is-style-offset-left,
.is-style-offset-left > .wp-block-media-text__media{
	padding: 0 0 var(--pp-offset) var(--pp-offset);
}
figure[class*="-image"].is-style-offset-left::after,
.is-style-offset-left > .wp-block-media-text__media::after{
	transform: translate(calc(-1 * var(--pp-offset)), var(--pp-offset));
	bottom: var(--pp-offset) !important;
	left: var(--pp-offset) !important;
}

figure[class*="-image"].is-style-offset-right,
.is-style-offset-right > .wp-block-media-text__media{
	padding: 0 var(--pp-offset) var(--pp-offset) 0;
}
figure[class*="-image"].is-style-offset-right::after,
.is-style-offset-right > .wp-block-media-text__media::after{
  transform:translate(var(--pp-offset), var(--pp-offset));
	bottom: var(--pp-offset) !important;
	right: var(--pp-offset) !important;
}