Adaptive Padding for Mobile

Hello,

Recently, I submitted a ticket on the forum asking how to add padding to my checkout page. With the help of this forum (thanks Senff!) I was able to with this snippet of code:

body.woocommerce-checkout {
  padding: 150px;
}

However, these parameters do not adapt to a smartphone-size screen and result in the page barely being readable. I was wondering of there was a way to only add padding above a certain pixel width, say 1000.

Thanks for your help!

The page I need help with: [log in to see the link]