Умная CSS-маска с использованием градиента и динамического радиуса границы ⇐ CSS

[Anonymous]

пытаюсь создать css-маску, используя способ, который показывает здесь потрясающий Темани Афиф.
К сожалению, то, что мне нужно, отличается от того, что Темани показывает в своих примерах.
Вот чего мне удалось достичь:
CSS MASK, края обрезаны до заданного мной радиуса границы.
Я хотел бы сохранить радиус границы таким, какой он есть, но перенести вырез дальше в форму, как в примере ниже:
CSS-маска с радиусом границы
Мне также удалось создать эффект обрезки на всех краях, снова используя метод Темани Афиф, но, как я На его странице можно увидеть, что настройка маски для всех четырех углов немного отличается, что меня еще больше смущает!
Можно ли вообще добиться эффекта, который я показываю на изображении выше с аналогичной настройкой маски CSS для всех четырех углов? Буду очень признателен за любой совет!
Спасибо за внимание!
Я попробовал этот подход, позаимствованный у Темани Афиф
// Cutted corner
&[class*="card-cut"]{
--r: var(--#{$pref}card-border-radius);
--s: var(--#{$pref}card-border-radius);

--_m:/calc(2*var(--r)) calc(2*var(--r))
radial-gradient(#000 70%,#0000 72%) no-repeat;
}

&.#{$pref}card-cut-tl{
mask:
calc(var(--s) + var(--r)) 0 var(--_m),
0 calc(var(--s) + var(--r)) var(--_m),
radial-gradient(var(--s) at 0 0,#0000 99%,#000 101%)
var(--r) var(--r) no-repeat,
conic-gradient(at calc(var(--s) + 2*var(--r)) calc(var(--s) + 2*var(--r)),
#000 75%,#0000 0);
padding-inline-start: 20%;
}

&.#{$pref}card-cut-tr{
mask:
radial-gradient(var(--s) at 100% 0,#0000 99%,#000 101%) calc(-1*var(--r)) var(--r) no-repeat,
right calc(var(--s) + var(--r)) top 0 var(--_m),
right calc(var(--s) + var(--r)) var(--_m),
conic-gradient(at calc(100% - var(--s) - 2*var(--r)) calc(var(--s) + 2*var(--r)),
#0000 25%,#000 0);
padding-inline-end: 20%;
}

&.#{$pref}card-cut-br{
mask:
right 0 bottom calc(var(--s) + var(--r)) var(--_m),
right calc(var(--s) + var(--r)) bottom 0 var(--_m),
radial-gradient(var(--s) at 100% 100%,#0000 99%,#000 101%)
calc(-1*var(--r)) calc(-1*var(--r)) no-repeat,
conic-gradient(from 90deg at calc(100% - var(--s) - 2*var(--r)) calc(100% - var(--s) - 2*var(--r)),
#0000 25%,#000 0);
padding-inline-end: 20%;
}

&.#{$pref}card-cut-bl{
mask:
calc(var(--s) + var(--r)) bottom var(--_m),
bottom calc(var(--s) + var(--r)) left 0 var(--_m),
radial-gradient(var(--s) at 0 100%,#0000 99%,#000 101%)
var(--r) calc(-1*var(--r)) no-repeat,
conic-gradient(from 180deg at calc(var(--s) + 2*var(--r)) calc(100% - var(--s) - 2*var(--r)),
#0000 25%,#000 0);
padding-inline-start: 20%;
}


Подробнее здесь: https://stackoverflow.com/questions/791 ... der-radius