How can I make a child div appear above a css mask in parent div

Question

I've applied an svg mask to an mp4 video created using the Gutenberg cover block. The problem is that the wp-block-cover__inner-container text is also masked by the svg but needs to appear above it.

I've tried to use the following answer to solve my issue but I'm not a pro and unable to do so: How to apply a mask-image only on an element's background and not on its children?

URL: https://net0kitchen.com/393-2

CSS:

.waves-video {
mask-repeat: no-repeat;
mask-position: center center;
-webkit-mask-image: url(https://net0kitchen.com/wp-content/uploads/2021/07/netzerokitchen-–-doughnut-01-1.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center center;
}

.doughnut-text {
text-align: center;
padding: 20px;
margin: auto;
background: red;
color: white;
}

Any help greatly appreciated.

Answer 1

Just move mask styles from .waves-video to .wp-block-cover__video-background