How to adapt text and/or elements size while designing to smaller screens?

I have a layout I made some time ago on Adobe XD (that was just a personal project) and now I wanna put it on Behance. To do so, I need to duplicate/adapt that layout (designed for desktop) to smaller screens, iPad and mobile.

Since I'm not used to design for smaller screens, after I started I've got a doubt: how do I know for example how much I need to decrease both text and UI elements' sizes? To explain better: I have a text with 40px. How should I calculate to properly decrease that size? Is there like a default percentage to reduce from those values? Maybe some visual "default" rules that every design follows?

I always design for Bootstrap, however I'm not sure if I'm thinking the right way.

(I've also posted this on stack overflow, I'm not sure which one is the best suitable to my question).

Thanks for all your thoughts and advices you could tell me. I worked most of time only for desktops, a traditional web designer, and now I'm trying to migrate to UI/UX.