Markdown and style - Strange behavior when reloading page

Since 2021.9 Im starting noticing strange behaviour with my frontend.

When writing code and saving it looks like the top picture but when I update/reload the page it looks like the bottom picture.

The code:

cards:
  - content: |
      # Asus Router 
    style:
      .: |
        ha-card {
          background-color: transparent !important;
          box-shadow: none !important;
        }
      ha-markdown:
        $: |
          h1 {
            font-size: 25px;
           # font-weight: bold;
            text-align: center;
            letter-spacing: '-0.01em';
          }
    type: markdown
  - type: glance
    entities:
      - entity: sensor.asuswrt_devices_connected
        name: Connected
      - entity: sensor.asuswrt_download_speed
        name: Download
      - entity: sensor.asuswrt_upload_speed
        name: Upload
    show_name: true
    show_state: true
    show_icon: true
    state_color: true
    columns: 3
    style: |
      ha-card {
      --ha-card-background: rgba(50,50,50,0.0);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      border: solid 2px rgba(100,100,100,0.5);
      border-radius: 20px;
      box-shadow: 3px 3px rgba(0,0,0,0.4);
      overflow: hidden;
      }
  - type: glance
    entities:
      - entity: sensor.asuswrt_download
        name: Download
      - entity: sensor.asuswrt_upload
        name: Upload
    show_name: true
    show_state: true
    show_icon: true
    state_color: true
    columns: 2
    style: |
      ha-card {
      --ha-card-background: rgba(50,50,50,0.0);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      border: solid 2px rgba(100,100,100,0.5);
      border-radius: 20px;
      box-shadow: 3px 3px rgba(0,0,0,0.4);
      overflow: hidden;
      }
type: vertical-stack

Try this suggestion:

Thanks! Worked perfect!

Added this: installed via HACS

frontend:
  extra_module_url:
    - /local/community/lovelace-card-mod/card-mod.js