excluding child from parents svg mask-image

Question

Edit: Fixed it by using Temani Afif's answer

I'm using an SVG mask on a parent div to create a shape for the background. However I want the child image of the masked div to overflow out of the div. The mask causes the child image to be masked out aswell. Is there a way to clear the mask for the child img element?

Here's an image of the current situation: Current situation

Here's an image to show the wanted outcome: Wanted outcome

This is my simplified code:

<a href="#" class="mask wide" style="background-color: red">
    <div class="image-name-wrapper">
        <img src="https://www.wonderfulnature.nl/uploads/6/5/2/6/65266507/zebra-3-wonderful-nature_1.jpg" alt=""/>
        <h3 class="title">Title</h3>
    </div>
</a>

.mask {
    mask-mode: alpha;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: center;
    &.horizontal {
        mask-image: url(../assets/masks/mask-horizontal.svg);
    }
    &.vertical {
        mask-image: url(../assets/masks/mask-vertical.svg);
    }
    &.wide {
        mask-image: url(../assets/masks/mask-wide.svg);
    }
}

img{
    width: 5.5rem;
    height: 5.5rem;
    margin-left: -2.25rem
}