Tarjeta de vista previa estadísticas con BEM, flexbox y first-mobile

En este caso de medio acabar el reto. No lo he terminado por dos razones:

• El color de fondo no se corresponde con el efecto final de la solución.
• La imagen no se adapta al contenedor en los estados intermedios.

Claramente debería de poner un background-image: url( ruta imagen);

Sería más fácil variar la ruta que poner dos imágenes y que se visualice una.

Utilizaría Css grid Para colocar mejor la imagen.

Principalmente dos

• Colocar un filtro a la imagen para que se viera como en la vista previa.
• Adecuar la imagen al contenedor para que no se vea tan fea, ni recortada.

Al final hice lo que pude, pero no encontré una solución aceptable. Tendré que mirar otras soluciones para ver en que me he equivocado.

Sobre todo cuando tengo una imagen que tiene el 100% del ancho del contenedor (móvil) y tiene que ponerse a un 50% del contenedor (escritorio), adaptándose a una altura que crece conforme se hace más ancho el contenedor padre.

Toda sugerencia o ayuda es bienvenida. Gracias.