Как я могу расположить другое изображение относительно верхнего изображения

Question

У меня есть эта тень, и я получил изображение, которое должно быть в том же положении, что и квадрат в Шауду.Я пробовал разные вещи с Css.Но всегда, когда я изменяю размер окна, изображение больше не в том же месте по сравнению с тенью.

Shadow

Это желаемый результат: Изображение с тенью

Я уже пробовал что-то подобное с CSS:

.product__image{

        max-width: 100%;
    position: relative;
}

.product__background{
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: -35%;
    right: -100%;
    top: -20%;
    bottom: -10%;
    z-index: -1;

}

<div class="product__image">
                <div class="product__background" style="background-image:
                    url('https://cdn.shopify.com/s/files/1/0050/5141/6625/files/pink.jpg?5067');" style="z-index: -100">
                </div>
                <img src="{{ product.featured_image | img_url: '630x420'}}" class=""
                                    alt="Product image">

            </div>

Но это не помогло изменить размер окна.

Может ли кто-нибудь помочь мне получить эту функцию?Я не могу вставить тень вручную, потому что тогда тень также появится в других местах на сайте.

Может быть, есть опция css для создания этой тени.Это также было бы здорово!