Stats preview card component solution

👋Hi Jacqueline dos Santos Braga! My name is Vanza!

I have some feedback that will improve this solution:

• First, instead of writing this:

.card-stats{
    background-color: var(--dark-desaturated-blue);
    border-radius: 10px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    height: 446px;
    width: 90%;
    max-width: 1110px;
}

.card-image::before{
    background-color: hsla(277, 64%, 61%, 0.452);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}

.card-stats__image{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

• You can just write this:

.card-stats{
    background-color: var(--dark-desaturated-blue);
    border-radius: 10px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    height: 446px;
    width: 90%;
    max-width: 1110px;
    overflow: hidden;
}

.card-image::before{
    background-color: hsla(277, 64%, 61%, 0.452);
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}

.card-stats__image{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

• That way, you don't have to repeat border-radius, just by adding overflow: hidden to its parent element.
• For the image purple overlay, I recommend to try this method:

1. HTML (You don't need img tag)

<div class="card-image">
</div>

1. CSS (You can change the background-image for the desktop using media query)

.card-image {
  background: url('../images/image-header-mobile.jpg') no-repeat center center;
  background-color: hsl(277, 64%, 61%);
  background-blend-mode: multiply;
  background-size: cover;
  width: 50%;
}

That's it! Hopefully this is helpful!