Blog Preview

I think your solution looks very good!

Some suggestions:

• You don't need to use Javascript to create the hover effect, you can use the :hover tag to do that. Although using Javascipt definitely was good practice! Here is how I did it:

.card__description_title {
    text-decoration: none;
    font-size: 1.5rem;
    color: var(--clr-neutral-900);
    font-weight: var(--fw-800);
}

.card__description_title:is(:hover, :focus) {
    color: var(--clr-primary);
}

I used variables for the colors, but you get the gist.

• You can use media queries to implement a mobile version, if you open your dev tools and squish the site you can see that you have some overflow. It could look like this:

@media (max-width:420px) {
    .card {
        max-width: 320px;
    }
}

This changes the width of the card to (max) 320px if the screen of the user is smaller than 420px.

But overall your solution is very, very nice!