Airfilter layout

Hey

im trying to build a line card for my airfilter that changes colour depending on the state.

graph: line
type: sensor
entity: sensor.0x1c34f1fffec14b33_pm25
detail: 1
name: Airfilter
hours_to_show: 24
icon: mdi:air-filter
unit: µg/m³
card_mod:
  style: |
    ha-card {
      background: rgba( 0, 0, 0, .5);
      border-radius: 15px;
      padding-bottom: 10px; 
      border: 2px solid #FFFFFF; 
      {% if states('sensor.0x1c34f1fffec14b33_pm25')| int < 100 %}
      --accent-color: rgba( 10, 247, 18, 1);      
      {% elif states('sensor.0x1c34f1fffec14b33_pm25')| int > 100 %} 
      --accent-color: rgba( 255, 200, 3, 1);
      {% elif states('sensor.0x1c34f1fffec14b33_pm25')| int > 300 %} 
      --accent-color: rgba( 255, 3, 3, 1);
      {% endif %}
    }
    .info .value {
      {% if states('sensor.0x1c34f1fffec14b33_pm25')| int < 10 %}
      color: rgba( 10, 247, 18, 1);      
      {% elif states('sensor.0x1c34f1fffec14b33_pm25')| int > 100 %} 
      color: rgba( 255, 200, 3, 1);
      {% elif states('sensor.0x1c34f1fffec14b33_pm25')| int > 300 %} 
      color: rgba( 255, 3, 3, 1);
      {% endif %}
      font-size: 25px;
    }
    .info .measurement {
      {% if states('sensor.0x1c34f1fffec14b33_pm25')| int < 10 %}
      color: rgba( 10, 247, 18, 1);      
      {% elif states('sensor.0x1c34f1fffec14b33_pm25')| int > 100 %} 
      color: rgba( 255, 200, 3, 1);
      {% elif states('sensor.0x1c34f1fffec14b33_pm25')| int > 300 %} 
      color: rgba( 255, 3, 3, 1);
      {% endif %}
      font-size: 10px;

since the µg/m³ can be between 0 and 1000 i thought i had to do it this way
but it always gets stuck on " {% elif states(‘sensor.0x1c34f1fffec14b33_pm25’)| int > 100 %} " turning evrything orange.

can anybody point me in the right direction

thanks in advance.

tried this:

card_mod:
  style: |
    ha-card {
      background: rgba( 0, 0, 0, .5);
      border-radius: 15px;
      padding-bottom: 10px; 
      border: 2px solid #FFFFFF; 
      {% if states["sensor.0x1c34f1fffec14b33_pm25"].state < 100}
      --accent-color: rgba( 10, 247, 18, 1);      
      {% elif states["sensor.0x1c34f1fffec14b33_pm25"].state < 200} 
      --accent-color: rgba( 255, 200, 3, 1);
      {% else } 
      --accent-color: rgba( 255, 3, 3, 1);
      {% endif %}
    }

it works in a other custom card but not this one :sleepy: