html/css help needed <3

[mean&gay]

hiya, i'm building a site on neocities.

so i just spend hours trying to figure out how to a- set up my images so that they change on hover, and b- set up those images so they are in five columns of two rather than one column of ten. and i did it! edit: i'm fiddling around again so the site might be a bit messy again, see the screenshot of my desktop instead <3

HOWEVER. it now looks pretty messy on mobile. before i'd done the change on hover & the columns coding, they appeared as five columns of two on desktop, and two columns of five on mobile (apparently this chunk of css allowed it to look like that on mobile, i don't really understand how it works, but it doesn't work now that i've added the change on hover & columns coding).

i have a few screenshots, i'll put them as imgur links so the post isn't clogged with images.

html for the columns and the images
css for the change on hover (it just repeats 9 more times with p2, p3 etc)
css for the columns
how the site looks on my desktop
how the site looks on my mobile

so basically, i'd love some advice on how to set it up so, on mobile, the images appear in two columns of five (fitting neatly inside the black box) while having it still look as it does on desktop. if that's even possible.

i'm extremely new to coding, i literally started today, i really don't understand a lot of the terminology so i apologize if i say anything silly. and also i'm sorry if my coding looks messy or overcomplicated lmao.

i think i included all the info you need, but lmk if there's something else missing and i can probably go grab it!

[notdura]

Hi there! Do you still need help?