Отбрасывание тени за замаскированным элементом ⇐ CSS

[Anonymous]

Пытаюсь создать эффект старой бумажной фотографии с волнистыми краями и тонкой тенью под ней, что добавит реалистичный эффект.
Я применил изображение-маску-коробку, используя svg-файл из-за его волнистых краев. Затем добавлены как box-shadow, так и filter:drop-shadow, но тень не введена. Кажется, маска скрывает тень. Я могу использовать либо волнистые края, либо тень. Как я могу замаскировать этот раздел, чтобы он имел волнистые края И сохранял тень?
И вот использованный код:

Код: Выделить всё

body {
background-color: #E7E9EB;
}

#couple {
height: 400px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
background-image: url('https://dev.cycladic.events/wp-content/media/cycladic-pavilion-couple-retouched-1200x798.jpg');
background-size: cover;
-webkit-mask-box-image: url("https://dev.cycladic.events/svg/zig-zag.svg") 20% / 20px / 0 round;
filter: drop-shadow(10px 10px 0 black);
box-shadow: 10px 10px 0 0 black;
}

Код: Выделить всё

Wavy edges mask

Подробнее здесь: https://stackoverflow.com/questions/793 ... ed-element