Trying to re-crop an image for mobile

Site URL: https://www.artifactslux.com

I'm trying to figure out how to re-crop an image for mobile. In a portfolio page, I have a background image with the subject left justified in the composition. I love how it works in desktop mode. Unfortunately when switching to mobile mode, the subject is cropped out. If I go into the Projects settings page and crop the image for mobile, it obviously sucks in desktop. I have found some online tutorials for adjusting the size of images for mobile, but that's not exactly what I'm trying to do. Also, none of those tutorials are dealing with the Project page format.

Any suggestions would be appreciated. Thanks!

This CSS

@media screen and (max-width: 767px) {
    body.homepage .portfolio-hover-bg-img {
        background-position:15% !important;
    }
}