Trouble with responsive design with custom code

Hi,

I hope someone can help. I have created a row flip cards acting as an about us section with the front being an image and the back telling us a little bit about the person and it hosts the social icons and contact details etc. The trouble I seem to be having is when I get to different screen sizes it all goes a bit wonky until we get to mobile view. I have some knowledge in html and CSS but really struggle with understanding how to make it responsive so that it works on all screen sizes. I wonder if someone would be able to help find the solution to it.

The scree sizes that this works is:

2560 x 1440
1920 x 1080
1680 x 1050

I start running into trouble from screen width 1440 till about 768...

here is the link:

https://www.cps.scot/home-test

Password:

cps-test-2023

Thank you in advance.

Thank you very much... I learnt something new today.

Looks great!