Help me exclude area from hover state

I want to update this page so that the "team" section is the only one that has the b/w hover effect. Right now, it's also affecting the top slideshow area. I'm not sure what CSS to use to exclude just that top section. Or if maybe I should be approaching this a different way? Any ideas?

CSS I'm currently using:

//Bio Photo Rollover//
li.list-item {filter: grayscale(100%);} 
li.list-item:hover { filter: none;}

Thank you!

You mean Key People Section? Use this new code

//Bio Photo Rollover//
.user-items-list-item-container[data-section-id="625f3f9aadede3156929916d"] {
li.list-item {filter: grayscale(100%);} 
li.list-item:hover { filter: none;}
}

@tuanphan that's awesome, thank you! Do you know if there's any easy way to reverse it so that I don't have to add a new section each time there is a new "team" section?

Edit to add: The idea being that one day, the client will manage this, and I'm not sure they'll be able to replicate it.

That's perfect, never would have thought of it — thank you!