Card Mod does not work inside a layout-card

[Pardasus]

My Home Assistant version: 2025.1.2

My lovelace configuration method (GUI or yaml): YAML

What I am doing:
I am trying to flash a card within a grid layout. Outside the grid layout this works without errors.

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: custom:mushroom-template-card
    primary: >-
      {% if is_state('binary_sensor.gaste_wc_bewegungsmelder_bewegung', 'on') %}
        Bewegung
      {% elif is_state('binary_sensor.gaste_wc_bewegungsmelder_bewegung', 'off')
      %}
        Inaktiv
      {% else %}
        Offline...
      {% endif %}
    secondary: |-
      seit
        {% if is_state('binary_sensor.gaste_wc_bewegungsmelder_bewegung', 'unavailable') %}
          {{ as_timestamp(states.binary_sensor.gaste_wc_bewegungsmelder_bewegung.last_changed) | timestamp_custom('%d.%m. - %H:%M') }}
        {% else %}
          {{ as_timestamp(states("input_datetime.kontrollraum_gaste_wc_bewegung_letzte_status_anderung")) | timestamp_custom('%d.%m. - %H:%M') }}
        {% endif %} Uhr
    icon: |-
      {% if is_state('binary_sensor.gaste_wc_bewegungsmelder_bewegung', 'on') %}
        mdi:motion-sensor
      {% else %}
        mdi:motion-sensor-off
      {% endif %}
    icon_color: >-
      {% if is_state('binary_sensor.gaste_wc_bewegungsmelder_bewegung', 'on') %}
        orange
      {% elif is_state('binary_sensor.gaste_wc_bewegungsmelder_bewegung', 'off')
      %}
        grey
      {% else %}
        red
      {% endif %}
    card_mod:
      style: |
        ha-card {
          {% if is_state('binary_sensor.gaste_wc_bewegungsmelder_bewegung', 'unavailable') %}
            animation: ping 2s infinite;
          {% else %}
            animation:
          {% endif %}
        }
        @keyframes ping {
            0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
            70% {box-shadow: 0 0 0 5px transparent;}
            100% {box-shadow: 0 0 0 0 transparent;}
        }
  - type: custom:mushroom-light-card
    entity: light.gaste_wc_licht_alle_lampen
    use_light_color: true
    show_brightness_control: false
    secondary_info: none
    primary_info: none
    show_color_control: false
    hold_action:
      action: none
    double_tap_action:
      action: none
    name: Lichter
    tap_action:
      action: more-info
    icon: mdi:palette
    fill_container: false
    show_color_temp_control: false
  - type: custom:mushroom-template-card
    primary_info: none
    secondary_info: none
    icon: |-
      {% if is_state('light.gaste_wc_licht_alle_lampen', 'on') %}
        mdi:lightbulb-group
      {% else %}
        mdi:lightbulb-group-off
      {% endif %}
    icon_color: |-
      {% if is_state('light.gaste_wc_licht_alle_lampen', 'on') %}
        orange
      {% else %}
        grey
      {% endif %}
    tap_action:
      action: perform-action
      perform_action: automation.trigger
      target:
        entity_id: automation.gaste_wc_licht_manuell_ein_ausschalten
      data:
        skip_condition: true
    hold_action:
      action: none
    double_tap_action:
      action: none
    primary: ""
    secondary: ""
layout:
  grid-template-columns: 56% 22% 22%
  margin: "-4px"

Error messages from the browser console:

---

By putting an X in the boxes ([]) below, I indicate that I:

• Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• Have made sure I am using the latest version of the plugin.

• Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[MartinAirN]

Could you test if it does work if instead of ha-card you use :host?

I think I see exactly the same behavior. (where previously it did work with classes)

[Pardasus]

I tried it once with host, but unfortunately it didn't change anything.

    card_mod:
      style: |
        :host {
          {% if is_state('binary_sensor.gaste_wc_bewegungsmelder_bewegung', 'off') %}
            animation: ping 2s infinite;
          {% else %}
            animation:
          {% endif %}
        }
        @keyframes ping {
            0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
            70% {box-shadow: 0 0 0 5px transparent;}
            100% {box-shadow: 0 0 0 0 transparent;}
        }

[ildar170975]

Have you asked in Community first?

[Pardasus]

I asked in a German community ( https://community.simon42.com/t/card-mod-vs-grid-layout/44089/5 ) and got the tip that the developer of Card Mod is the same as the grid layout and I should ask here. Google didn't give me any results and the answer from ChatGPT didn't help me either.
I honestly don't know if it's a bug or if it just doesn't work with a grid layout. But since both come from the same developer, I could well imagine that it should actually work. But unfortunately I do not know this.

[ildar170975]

Suggest to ask here:
https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744
And please provide a SHORT MINIMAL example - people will use it for analysis & testing.

Also, test w/o mushrooms. May be this is not about card-mod - but about mushrooms. Note that there is a clear announcement in mushroom repo about "card-mod-related issues will not be accepted".