All solutions

1. For active states of social media icons, I created 2 SVGs with different colors and switched them on hover. (a) Is there any way we can do it with CSS properties like "color" or anything? (b) Or any other better approach to it?

2. In the articles section, for some size of the screen ( > 1024px i.e. for tablet view), one of the cards would increase in size as compared to others due to content length. For solving it, I have fixed the height for content and change it for different screen sizes. Is there any better approach to it?

How do we build the thumb of slider more similar to that of design? In my solution there are two issues with the slider:

1. The thumb is not wrapped with the pink gradient in a curved manner. It is vertical.
2. The Pink Gradient is moving with the help of slider value. While moving the thumb you can notice the gradient to be a little behind at the start and later it covers its whole thumb.

I would appreciate any general feedback or improvements. I have following queries in particular:

Q1) Is there a specific width below which is considered a mobile view?

Q2) Which CSS properties are recommended or best practice to be kept defined for the whole application, i.e., in *{ }