Card with hover effects, flexbox

👾Hello @Hatchino, Congratulations on completing this challenge!

👨‍💻 Here are some tips to improve your solution code:

1.Fix the component responsiveness, its not working yet and this is due the fixed width you've applied to the container. The difference between width and max-width is that the first(width) is fixed and the second(max-width) is flexible and make the element shrink when the screen starts to scale down. So if you want a responsive block element, never use width choose or min-width or max-width.

2.The image is not responsive yet, a quick way to make any image responsive and respecting the container size is to add display: block and max-width: 100% to the <img> selector. To improve the responsiveness even more adding the auto-crop property you can add object-fit: cover to make the image crop inside the container its inside.

img {
    display: block;
    object-fit: cover;
    max-width: 100%;
}

✌️ I hope this helps you and happy coding!