How to set up adaptive connection of background-images in a slider?

Question

HTML

There is a site where on the first screen there is a slider (owl-carousel), which contains widescreen slides in full width and full height of the screen (100vw x 100vh).
Each slide has a background-image with a 1920x1080 resolution image.
The url of the image for the background of the slide is set inline, so that you can insert a php variable with the path to the image into the markup in case of integration with the engine.
PageSpeed ​​Insights reduces the score on mobile for oversized images by recommending: " Adjust images to the appropriate size ".
I am aware of picture and srcset, but the picture is set by the background, and I am also aware of media queries @mediain CSS, but I have these urls inline, and@mediait is impossible to register inline for an element ((
How to be?
Link to the site metod-agency.ru