How to make parallax image with locomotive scroll?

I have two images

I want to achieve the same effect as on this site: https://evm.elektramontreal.ca/en/about
That is, the parallax of the image. The images themselves should remain in place, but parallax occurs when scrolling. When I add the data-scroll data-scroll-speed=”-5″ img tag, it “goes” to the top and no parallax occurs

Code:

            <div class="intro__bottom grid">
                <span class="intro__brief">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                </span>
                <div class="intro__images"> 
                    <div class="intro__image">
                        <img src="one.webp" alt="First intro image">
                    </div>
                    <div class="intro__image">
                        <img src="two.webp" alt="Second intro image">
                    </div>
                </div>
            </div>

.intro__images {
    display: flex;
    column-gap: 20px;
    grid-area: 1 / 6 / 1 / 11;
    height: 533px;
}

.intro__image {
    width: 100%;
}

.intro__image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

I’ve tried swapping out data-scroll, creating div containers