Sensor attributes as lovelace property values?

I’ve seen others do this and I can’t seem to get it to work. Not sure if it’s syntax or something else.
I’m trying to get the opacity of an image to based on the brightness of a light. I’m using the picture element. Toggling on and off is perfect. I’m just now trying to get the brightness dynamically set. Nothing I try seems to work. The first hard coded number works great. I just can’t it set based on the brightness of the light.

style:
  #opacity: 25%
  #opacity: ${states['light.office'].attributes['brightness']} + '%'
  opacity: ${states['light.office'].attributes['brightness']}

Full entity section

- entity: light.office
            hold_action: none
            title: ${states['light.office'].attributes['brightness']}
            state_image:
              'on': /local/floorplan/office_lights.png
              'off': /local/floorplan/transparent_square.png
            style:
              #opacity: 25%
              opacity: ${states['light.office'].attributes['brightness']} + '%'
              left: 50%
              mix-blend-mode: lighten
              top: 50%
              width: 100%
            tap_action: none
            type: image

Any ideas on what I’m doing wrong?