исключение ребенка из родителей svg mask-image

Question

Edit: Исправлено с помощью Temani Afif s answer

Я использую маску SVG на родительском div для создания формы для фона . Однако я хочу, чтобы дочернее изображение замаскированного div вышло за пределы div. Маска также приводит к маскированию дочернего изображения. Есть ли способ очистить маску для дочернего элемента img?

Вот изображение текущей ситуации: Текущая ситуация

Вот изображение, чтобы показать желаемый результат : Требуемый результат

Это мой упрощенный код:

<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
}