In this challenge, you will develop a responsive statistics section that fetches data from an API and displays it.

This challenge will require coding a responsive multi-column layout that reorganizes content based on the device's screen size to ensure a seamless user experience.

Implementation requirements

• Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
• Responsive behavior:
  • Text size: Should be responsive; font size is larger for wider devices, smaller for narrow devices.
  • Responsive layout: The layout should reorganize responsively. The content should stack vertically on smaller screens and align horizontally as the screen width increases.
  • Image size: The image resizes to fill the available width on tablets and mobile viewports.
  • Element adaptability: Ensure that text elements and images resize appropriately without distortion or loss of quality.
• Dynamic content: Fetch the data from an API and display the response. This is so that the displayed data is always up-to-date.
• Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox and Safari.
• [Stretch goal] Performance optimization: Optimize image assets and code for quick load times, ensuring a smooth and responsive user experience.
• [Stretch goal] Accessibility and semantics: Follow best practices for web accessibility, such as using semantic HTML and ARIA roles where necessary and using proper alt tags for images.