Mediaquery of viewport on picture elements how to

Configuration Frontend
1

Hi All,

type: picture-elements
image: local/3D/base.png
card_mod:
  style: |
    ha-card {
          --fan-transform-style: scale(2.0,5.0) translate(-50%,-50%);
          --sensor-transform-style: scale(3.5,1.5) translate(-50%, -50%);
          --other-transform-style: scale(5.0,1.0) translate(-50%,-50%);
      }
elements:
  - type: image
    entity: switch.kitchen_light_3
    style:
      left: 50%
      top: 50%
      width: 100%
      mix-blend-mode: lighten
    state_image:
      'on': local/3D/kitchen.png
      'off': local/3D/transparent.png

May I know how i can set up a mediaquery to allow such options:

  • fan-transform-style,
  • sensor-transform-style and
  • other-transform-style
    based on the viewport so i could size the styles accordingly?