All solutions

i completely went on insane on this project, i don't know but my body keeps losing its size of 100vh when i resize it which makes my card move to the left since the body which is my grid no taking the whole viewport and when i remove my pseudo elements before and atfer it seems to solve the problem. so please if anyone knows the answer le me know i've been trying for at least 5 hours and i couldn't find an answer i feel like i'm still lost when it comes to pseudo elements and the way they work, Thank you.

I found some difficulty in the animation within the phone. i could cancel the overlay and the view image when i click on the container twice instead it still apply the same effect rather than disabling it. I'm aware that it can be done using a little bit of java script to toggle it but i really wanna get comfortable with css and html first and then pass to java script i would appreciate if someone has a solution for this using only HTML or CSS and also reporting any issues or miss usage of functions in my code would be helpful, Thank you.

dunno if i did the phone version right, feel free to check it pls

if you saw smth odd in my code pls try to correct me. Thank you

took longer than I've expected but it definitely cleared a lot of stuff in my head. I'd like to thank Daniel for the last advice @Daniel . I think my semantic HTML is improving a little bit. Any comments or advices are really helpful and appreciated, Thank you.

I have one problem that i couldn't figure it out which is my container starts to shift upwards towards the right when i try to resize from 375px to 0px i've tried using some media queries and eliminating the child elements that has a fixed width but it didn't work either. I don't know if it's a normal behavior but any ways any instructions or advices about the structure of code would be highly appreciated.

I had a difficult time with responsive design after I made the desktop version and then i realized i should make a phone version also and i had a difficult time editing it so i gave up after searching a whole day but here's the desktop version. I had difficult time choosing between whether i should do it with flex boxes or grids since still kind of learning the difference and where to implement them exactly. Any comments about my command choices and the structure of my code will be highly appreciated.