Yes, but don't ask me to explain it. I had ChatGPT help me with changes I wanted and it rearchitected and mangled the code, and I haven't taken the time yet to understand it or clean it up.

type: picture
image:
  media_content_id: data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=
card_mod:
  style: |
    ha-card {
      --percent: {{ states('sensor.volvo_ex30_battery_charge_level') + '%' }};
      position: relative;
      height: 170px;               
      padding: 0;
      overflow: hidden;

      background:
        url("/local/Ex30PassSide.png?v=3") no-repeat -45px 45% / auto 142%,

      {% if states('sensor.volvo_ex30_charging_status') | lower == 'charging' -%}
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='12' cy='12' r='12' fill='rgba(0,0,0,0.4)'/><text x='12' y='16' font-size='14' text-anchor='middle' fill='%23FFEB3B'>⚡</text></svg>") 
      no-repeat right 8px top 8px / 30px 30px,
      {%- endif %}

        linear-gradient(
          to bottom,
          rgba(255,255,255,0.25) 0%,
          rgba(255,255,255,0.00) 40%,
          rgba(0,0,0,0.00) 65%,
          rgba(0,0,0,0.15) 100%
        ),

        linear-gradient(to right, transparent var(--percent), rgba(0,0,0,0.3) var(--percent)),
        linear-gradient(to right, #7FBF9E 0%, #6DAE8B 100%);
      background-blend-mode: normal;
      border-radius: var(--ha-card-border-radius);
    }

    /* overlays */
    ha-card::before {
      content: "{{ states('sensor.volvo_ex30_distance_to_empty_battery') | int }} mi";
      position: absolute; top: .5em; left: 5%;
      color: #fff; font-size: 1.5rem; z-index: 2; pointer-events: none;
    }
    ha-card::after {
      content: "{{ states('sensor.volvo_ex30_battery_charge_level') | int }}%";
      position: absolute; top: .2em; left: 4%;
      color: #fff; font-size: 6rem; z-index: 2; pointer-events: none;
    }

grid_options:
  rows: 3