I used html, css to complete this challenge

1 - Media Queries: You've successfully implemented media queries to make your website responsive, which is great. The mobile responsiveness part is well-handled in your CSS.

2 - Centering Elements: To address your concern about centering elements, there's an opportunity for improvement. In your mobile responsiveness section, you've centered the text content within the card, which is good. However, you can enhance the alignment of the statistics section. Currently, it's stacked vertically, and you could center it horizontally by adding text-align: center; to the .card .stats class. Additionally, you might consider adding some spacing between the individual statistics for better visual separation on mobile devices.

3 - Aspect Ratio on Image: Regarding maintaining the aspect ratio of the image during the switch from mobile to desktop, it looks like you've used a background image with a fixed height on the .img_bg class. This approach might not ensure the image's aspect ratio is maintained. Instead, you could use an <img> element and set width: 100%; height: auto; to ensure the image adapts to different screen sizes while maintaining its aspect ratio. You can wrap this in a <div> to control the background color overlay.

Here's an example of how to modify your CSS for maintaining image aspect ratio:

.img_bg {
  width: 50%;
  background-color: rgba(170, 92, 219, 0.7);
  display: flex;
  align-items: center;
}

.img_bg img {
  width: 100%;
  height: auto;
}

These changes should help you maintain aspect ratios and improve centering on mobile devices. Keep up the good work, and don't hesitate to reach out if you have more questions or need further assistance!