Picture Elements

Configuration Frontend
1

Hello.
New here so if i posted in a bad section sorry.

I have the following code:

type: picture-elements
elements:
  - type: image
    entity: input_number.alk_dosing_volume
    image: /local/LAYOUT/afr5.png
    tap_action:
      action: toggle
    style:
      top: '-45.4335%'
      left: '-45.2738%'
      z-index: 3
      transform: translate(0,0)
      width: 100%
      height: 100%
      scale: 5.49%
      color: transparent
  - type: image
    entity: input_number.alk_dosing_volume
    image: /local/LAYOUT/afr3.png
    tap_action:
      action: toggle
    style:
      top: '-45.4335%'
      left: '-45.2738%'
      z-index: 2
      transform: translate(0,0)
      width: 100%
      height: 100%
      scale: 5.175%
      color: transparent
    card_mod:
      style:
        hui-image $: |
          .container > img#image {
            {% set LEVEL = 100-states('sensor.ww')|int -%}
            mask-image: linear-gradient(to bottom, transparent {{LEVEL}}%, white {{LEVEL|int+1}}%);
          }  
image: /local/LAYOUT/SCALED OUTLET.png
dark_mode_image: /local/LAYOUT/SCALED OUTLET.png

cropped

but for some reason the image element afr is truncated.
Any help will be appreciated