Screen size dependency values ​​for data-x in impress.js

Let's say you have the following impress.js

code:

<div id="title" class="step" data-x="0" data-y="0" data-scale="5">
Foo
</div>
<div id="toc" class="step" data-x="10000" data-y="0" data-scale="1">
bar
</div>

      

        
        
        
      

    

This displays fine on the screen 1920x1080

because 5

( data-scale

) times 2000

(screen width with some buffer) 10000

.

But:

• On small screens, it doesn't look pretty (because it's 1920
  
  big compared to, for example 800
  
  ); and
• For large screens, slides may still overlap.

How do I set slide position based on viewport size? So something like 500vw

? (tried this but it didn't work).