How can I make the main product image sticky on mobile in Debut?

[AlfieHayward1]

Hey. I want to make the main product image (.product-single__media) sticky on mobile. This is so the image shows at the top of the page, and customers can see the image change when selecting variants without having it scroll to the top of the page.

This is my current code, but it doesn't seem to work. What am I doing wrong?

@media only screen and (max-width: 750px) {
.product-single__media {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
}
}