preview card con css flexbox y css grid

For the color of the image, in the html wrap the img in a div and give it a class for the styling. <div class="stat-image"><img></div> in the css give .stat-image a background-color of soft violet and give the img a height of 100%, width of 100%, mix-blend-mode: multiply object-fit of cover and opacity of 0.8.

.stat-image{
background-color: hsl();
}
img{
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
opacity: 0.8;
}

wrap the heading in <h1> and <div class="attribution"> in the footer tag to fix the accessibility issue.

to center . principal on the page using grid, min-height:100vh; display: grid place-items: center to the body.

To center .principal on the page using grid:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

You can use a div like background-color in pink and apply opacity