Button card configuration on Firefox/iOS mobile app issues - help?

I spent some time trying to mimic the tado tiles, on macOS/Firefox it looks good:

However, on the iOS mobile app, the humidity and CO2 values are not showing and the icon is not correctly positioned:

Code for one tile is:

type: 'custom:button-card'
entity: sensor.tado_cloud_heating_temperature
name: Living
show_state: true
show_icon: false
aspect_ratio: 6/4
styles:
  grid:
    - grid-template-areas: '"i" "n" "s" "set" "hum"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content min-content min-content min-content
  state:
    - justify-self: start
    - padding-left: 10px
    - font-size: 150%
    - font-weight: bold
    - color: white
  name:
    - justify-self: start
    - padding-left: 10px
    - font-size: 70%
    - font-weight: bold
    - color: white
  custom_fields:
    set:
      - justify-self: start
      - padding-left: 10px
      - font-size: 70%
      - font-weight: bold
      - color: 'rgba(255,255,255,0.7)'
    hum:
      - justify-self: start
      - padding-top: 10px
      - padding-left: 8px
      - font-size: 60%
      - font-weight: bold
      - color: white
custom_fields:
  set: |
    [[[
      return `<span>Set to ${states['climate.tado_cloud_heating'].attributes.temperature}°</span>`
    ]]]
  hum: |
    [[[
      if (states['climate.tado_cloud_heating'].attributes.current_humidity > 65)
        var icon_color = 'rgb(255,128,102)';
      if (states['climate.tado_cloud_heating'].attributes.current_humidity <= 65)
        var icon_color = 'rgb(255, 222, 0, 40)';
      if (states['climate.tado_cloud_heating'].attributes.current_humidity < 35)
        var icon_color = 'rgb(18,136,194)';
      if (states['sensor.co2_living_median'].state > 2000)
        var icon_color_co2 = 'rgb(255,128,102)';
      if (states['sensor.co2_living_median'].state <= 2000)
        var icon_color_co2 = 'rgb(255, 222, 0, 40)';
      if (states['sensor.co2_living_median'].state < 1000)
        var icon_color_co2 = 'rgb(154,205,50)';
      return `<span><ha-icon
          icon="mdi:water"
          style="width: px; height: 12px; color: ${icon_color};">
          </ha-icon>` + `${states['climate.tado_cloud_heating'].attributes.current_humidity}%
          </span>
          <span><ha-icon
          icon="mdi:tailwind"
          style="width: px; height: 12px; color: ${icon_color_co2};">
          </ha-icon>` + Math.round(states['sensor.co2_living_median'].state) + ` ppm`
    ]]]
state:
  - styles:
      card:
        - background-color: 'rgb(18,136,194)'
    operator: <
    value: 19
  - styles:
      card:
        - background-color: 'rgb(255,128,102)'
    operator: '>='
    value: 25
  - value: 25
    styles:
      card:
        - background-color: 'rgb(255, 203, 0, 40)'
    operator: <

Not sure what is wrong, I was thinking either the grid template row setting, I have no clue what it should be, just messed around until it looked OK on Firefox. That or either perhaps the javascript is not run since the values are not showing either.

Anyone who has enough knowledge to spot the issue(s)?