Setting a width of an element depending on screen width

Configuration
1

I’d like to set a width in card_mod depending on the screen width (or browser width)

I can read the needed value in e.g. a button-card.
Depending on the “document.documentElement.clientWidth” , I can return the needed value:

      - type: custom:button-card
        entity: cover.roof_top
        layout: name_state
        size: 100%
        show_name: true
        show_icon: false
        name: |
          [[[
            var v = document.documentElement.clientWidth;
            if (v > 1000)
              v = 150
            else
              v = 75
            return v;
          ]]]

However here it is only the name which is set. I would like to use this value in the following card:

      - type: custom:shutter-card
        title: ''
        entities:
          - entity: cover.roof_top
            name: Roof Top shutter
            buttons_position: bottom
            title_position: bottom
        card_mod:
          style:
            .: |
              ha-card .sc-shutter-selector-picture {
                width: 
                  {% if states('input_number.anynumber') | int > 20 %}
                    150px
                  {% else %}
                    75px
                  {% endif %} !important;
              }

Instead of the “states(‘input_number.anynumber’)”, I’d like to use the “document.documentElement.clientWidth”.

Is this in any way possible?

Thanks for any hints!