Adapting to dynamic content using modern CSS

So right here I have these cards coming in and they're all being done with JavaScript, you know, fetching the data, all of that. And instead of putting in hard values or the icons or anything like that, we can let CSS make those decisions. So on each one of the cards, JavaScript is passing the weather through as a data attribute as well as the amount of rain that's coming. And what that means is here where I have these cards, we can see we're already doing some stuff, but I want to update my icons based on whether it's a lot or a little bit of rain. And these two are missing the rain icons right now. So what I have here is all my icons. Then in my weather cards, you can see I'm using the ATR function, adder function, the attribute function to get the weather and the precip precipitation amount. And I'm saving this as a custom ident which is because it's text. And then this one as a number because these do need to be typed if we want to be able to use them in CSS. Now, what I'm going to do is come down a little bit further. You can already see I have style queries set up here for if it's sunny, if it's partly cloudy, or if it's raining. But the raining ones aren't working. Uh cuz I have two different rain conditions now. And then I'm going to add another style query right here. So we're doing if it's raining and then we're going to go and take a look at that precipitation again. So I want to spell that correctly. So I'm going to copy that and we're going to say and the precipitation is greater than five. So if it's more than 5 mm of rain, we're going to get our rain heavy icon. And we can see that one is coming in. And then I'm going to copy this. We're going to paste it down here and say if the precipitation is less than or equal to 5, then we're going to get our rain light icon instead. But more than that, Thursday is partly cloudy, but there's also some rain that's coming in. And maybe our API is only saying the weather is partly cloudy and we want to be able to adapt to that to also account for the rain. So, let's come over here where I have the partly cloudy and we can come in with this one. I'm going to paste that one, but I'm also going to add an and right here. And then what I want to do is look for my precipitation. I just realized I misspelled precipitation here. It should have been P R E and I said I didn't want to misspell it earlier, but at least we're consistent with the misspelling. And if this is greater than zero, that means it is going to be raining. And then my icon can update and show that it's partly cloudy and there might be a little bit of rain along the way as