Stats preview card component with flexbox and grid

Hi, I have a few questions about accessibility best practices regarding lists. I used an unordered list for stats (10k+ companies, 314 templates, 12m+ quotes),

• I wanted to give this list a meaningful title without changing the UI so I added an h2 and wrapped both h2 and ul in a div, is this the best approach? I could use aria-labelledby instead of wrapping a div, or just an aria-label to eliminate both h2 and div?

• I wanted screenreaders to read "over 10 thousand companies" instead of "10k+ companies", so I created a span with desired text and made it available for screen-reader only. I also used "aria-hidden" on "10k+ companies" to avoid confusion. Is it the best practice? Or should I use an aria-label on "10k+ companies" instead and eliminate the span with desired text ("over 10 thousand companies") ?

Also, what's the deal with image overlay? I couldn't get it to look exactly like the design using the colors given in the style-guide. I used a wrapper around the image and used a pseudo-element (::before) to create an overlay with 60% opacity. I'm I missing something here?

Thanks!