Is there a way to use card-mod or mod-card in the following to reduce the font size for the name in last 4 buttons?

Is there a way to use card-mod in the following to reduce the font size for the name in last 4 buttons?

type: 'custom:vertical-stack-in-card'
cards:
  - type: thermostat
    entity: climate.living_room
    style: |
      ha-card {
        color: white;
        box-shadow: none;
        background:
        {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
          #EB6D00
        {% endif %} ;
        background: 
        {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
          blue 
        {% endif %} ;
        background:
        {% if is_state_attr('climate.living_room', 'hvac_action', 'off') %}
          #373F48
        {% endif %} ;
      }
    theme: iOS Dark Mode
  - type: entities
    entities:
      - entity: sensor.living_room_humidity
        name: Inside Humidity
        icon: 'hass:none'
      - entity: sensor.openweathermap_temperature
        name: Outside Temp.
        icon: 'hass:none'
    style: |
      ha-card {
        color: white;
        box-shadow: none;
        background:
        {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
          #EB6D00
        {% endif %} ;
        background: 
        {% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
          blue 
        {% endif %} ;
        background:
        {% if is_state_attr('climate.living_room', 'hvac_action', 'off') %}
          #373F48
        {% endif %} ;
      }
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: input_select.hvac_mode
        name: MODE
        show_name: true
        tap_action:
          action: call-service
          service: input_select.select_next
          service_data:
            entity_id: input_select.hvac_mode
        color_type: icon
        state:
          - operator: template
            value: |
              [[[ return states['climate.living_room'].state === 'off' ]]]
            icon: 'mdi:power'
            color: white
          - operator: template
            value: |
              [[[ return states['climate.living_room'].state === 'heat' ]]]
            icon: 'mdi:fire'
            color: 'rgb(239, 140, 0)'
          - operator: template
            value: |
              [[[ return states['climate.living_room'].state === 'cool' ]]]
            color: blue
            icon: 'mdi:snowflake'
        styles:
          card:
            - background-color: |
                [[[
                  if (states['climate.living_room'].attributes.hvac_action == 'heating') 
                    return '#EB6D00';
                  if (states['climate.living_room'].attributes.hvac_action == 'cooling')
                    return 'blue';
                  else return '#373F48';
                ]]]
            - color: white
        show_state: false
      - type: 'custom:button-card'
        entity: input_select.preset_mode
        name: ECO
        label: ECO
        tap_action:
          action: call-service
          service: input_select.select_next
          service_data:
            entity_id: input_select.preset_mode
        color_type: icon
        color: white
        icon: 'mdi:leaf-off'
        state:
          - operator: template
            value: >
              [[[ return states['climate.living_room'].attributes.preset_mode ==
              'eco' ]]]
            icon: 'mdi:leaf'
            color: green
        show_state: false
        show_name: true
        styles:
          card:
            - background-color: |
                [[[
                  if (states['climate.living_room'].attributes.hvac_action == 'heating') 
                    return '#EB6D00';
                  if (states['climate.living_room'].attributes.hvac_action == 'cooling')
                    return 'blue';
                  else return '#373F48';
                ]]]
            - color: white
      - type: 'custom:button-card'
        entity: climate.living_room
        name: SCHEDULE
        action: url
        navigation_path: 'https://home.nest.com'
        color_type: card
        icon: 'mdi:calendar-clock'
        show_state: false
        show_name: true
        styles:
          card:
            - background-color: |
                [[[
                  if (states['climate.living_room'].attributes.hvac_action == 'heating') 
                    return '#EB6D00';
                  if (states['climate.living_room'].attributes.hvac_action == 'cooling')
                    return 'blue';
                  else return '#373F48';
                ]]]
            - color: white
      - type: 'custom:button-card'
        entity: climate.living_room
        name: HISTORY
        action: url
        navigation_path: 'https://home.nest.com'
        color_type: card
        icon: 'mdi:progress-clock'
        show_state: false
        show_name: true
        styles:
          card:
            - background-color: |
                [[[
                  if (states['climate.living_room'].attributes.hvac_action == 'heating') 
                    return '#EB6D00';
                  if (states['climate.living_room'].attributes.hvac_action == 'cooling')
                    return 'blue';
                  else return '#373F48';
                ]]]
            - color: white

Trying to manipulate it but unsuccessful…

image

Need to change or disable the font-size: 1.2rem;

      - type: 'custom:button-card'
        style: |
          :host { 
            --paper-item-icon-color: black;
            }
        "#name.ellipsis":
          $: |
            ha-card.button-card-main {
              font-size: .8ren !important;
            }
        entity: climate.living_room
        name: HISTORY

Figured it out!

      - type: 'custom:button-card'
        style: |
          ha-card { 
            font-size: 0.8rem
            }

Well, I thought I had.
The ha-card entry is being overridden by a constructed stylesheet called ha-card.button-card-main { .

Added !important and it’s now fixed.