Can't figure out custom CSS to disable hover over on H2

Hello again!

I'm trying to add a hover-over effect on my category/tag labels which I added a border to:

https://fullcleared.com/news/

The thing is, I am also using the dynamic text to pull the term archives in my custom title bar. If you mouse over the H2 in the top gradient bar, it also adds the background-color. I tried replicating the same CSS I used to hide the standard border from the H2 but it doesn't work on the hover over (I actually don't think I did the hiding on the normal text properly, but it works so /shrug!)

Here's the CSS I'm using, some of it came from another GP Site Library template and then I started messing with it.

/* Category label background colors */

.post-term-item {
	border-radius: 3px;
}

p:not(body) .post-term-item {
	background-color: var(--blue);
	padding: 3px 7px 3px 7px;
}

.post-term-item:hover {background-color: var(--base);}

p:not(body) .post-term-item.term-recommendations {
	padding: 3px 7px 3px 7px;
	background-color: var(--green);
}

.post-term-item.term-recommendations:hover {
	background-color: var(--purple);
}

p:not(body) .post-term-item.term-news {
	padding: 3px 7px 3px 7px;
	background-color: var(--orange);
}

.post-term-item.term-news:hover {
	background-color: var(--pink);
}

p:not(body) .post-term-item.term-reviews {
	padding: 3px 7px 3px 7px;
	background-color: var(--pink);
}

.post-term-item.term-reviews:hover {
	background-color: var(--orange);
}

p:not(body) .post-term-item.term-features {
	padding: 3px 7px 3px 7px;
	background-color: var(--purple);
}

.post-term-item.term-features:hover {
	background-color: var(--green);
}

Thanks in advance!