Stats preview card component

Replace <div class="card"> with the main tag to fix the accessibility issue.

Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units, click here

For the color of the image, add mix-blend-mode: multiply to the img and change the opacity value to 0.8.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hello, great job here. The <picture> tag gives web developers more flexibility in specifying image resources.

The most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to fill the browser viewport.

The <picture> element contains two tags: one or more <source> tags and one <img> tag.

The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute). The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags matches.

The <picture> element works "similar" to <video> and <audio>. You set up different sources, and the first source that fits the preferences is the one being used.

For example

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Looking at the example, at a minimum viewport width of 650px, the first image is displayed. At a minimum viewport width of 465px, the second image is displayed. Else the third image(fallback) is displayed.

Secondly, the picture tag can stand independently, the same as the image tag and so does not necessarily need to be placed in a div.

Read more about picture tags using the following links W3 - Schools and HTML Picture.