responsive landing page using CSS positioning properties

I really used lots of relative and absolute positionings throughout the CSS to complete this challenge. It was a good learning experience of CSS position properties. The background picture in mobile screen however, for some unknown reason was a bit compressed than the original, although I have set the image to the exact dimensions that Figma provided.

I still haven't found really helpful resources on how to configure CSS filter to get the image color change on hover. The block below changes the social icon color/hue from black to orange. Can some one explain how this works or send some helpful links? I got the filter configurations from @mendoncajoao who has completed the challenge.

.social_media a:hover,
.social_media a:active {
    filter: invert(74%) sepia(57%) saturate(5327%) hue-rotate(327deg) brightness(103%) contrast(96%);
}