CSS Styling?

[nitewing76]

For my dashboard I am using ha-floorplan that was created following tutorials by BitBorn on YT.
Below is the area where I wish to incorporate Trash Card.
The icons and lines you see are simply there to assist with the placement and alignment of the card(s).

My goal:
If the pickup date is more than 7 days I wish for the text and picture to be subdued (gray-ish) using filter: saturation() brightness(), so I can be prepared and not rushed to rake leaves or clean out the garage.
If I don't do it this way, then I still need to reference the calendar and there would be no need for this card. ;)
If pickup is less than 7 days, then the picture and text will be normal color.
I also need to separately rotate each picture/icon 23.5deg and rotate the text -66.5deg.

In Trash Card's YAML I have been able to format the CSS for the entire card as a whole, but not the individual elements.
In the browser's dev tools, I have been able to format the CSS for all pictures and format the text separately, but even if I go inside the container for one specific element and change the style, it changes the style for all pictures and all text on the card.
No matter which level I try to style a picture (including the img level with the picture's URL), all images on the card are changed.

I'm not completely new to CSS, but my knowledge of constructing CSS is very limited.
...though I'm trying to learn.

I have tried to research how to use the key to directly style elements inside a container (including dev tools AI), but nothing I have tried inside the card's yaml for individual elements has had any effect (only :host to style the entire card).