Stats preview card component using html css

What challenges did you encounter, and how did you overcome them?

At first, I set the height of the background to 100vh, which caused the content to overflow when I designed for smaller screens. It took me a while to realize the issue and change the height to min-height: 100vh.

main {
    background-color: var(--main-background);
    min-height: 100vh;
    display: grid;
    place-content: center;
}

What specific areas of your project would you like help with?

This is my first time using overlay in CSS. I noticed that in the frontend design, the person in the image appears to have a stronger color tone compared to my solution. I’d appreciate any feedback on my CSS and suggestions on how I can improve it.

.card .img::after {
    content: '';
    position: absolute;
    background-color: var(--accent);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    opacity: 0.7;
    border-radius: 0 .5rem .5rem 0;
}