In this post you can see and copy all the simplified classes that I use for my websites to make adding padding faster, global and responsive. For each padding class (All sides, Top & Bottom, or Top or Bottom separately) you can use s (small), m (medium) or l (large). So try to minimise the padding sizes you use in your design to a maximum of 3 to get the most benefit of using these classes.
/* PADDING ALL SIDES */ .pad-s{padding: clamp(1rem, 0.8846rem + 0.5128vw, 1.5rem);} .pad-m{padding: clamp(1.5rem, 1.3846rem + 0.5128vw, 2rem);} .pad-l{padding: clamp(2rem, 1.7692rem + 1.0256vw, 3rem);} /* PADDING TOP & BOTTOM */ /* Improved code */ .pad-tb-s{padding: clamp(1.5rem, 1.2692rem + 1.0256vw, 2.5rem) 0;} .pad-tb-m{padding: clamp(4rem, 3.76915rem + 1.026vw, 5rem) 0;} .pad-tb-l{padding: clamp(7rem, 6.76915rem + 1.026vw, 8rem) 0;} /* PADDING TOP */ .pad-t-s{padding-top: clamp(1.5rem, 1.2692rem + 1.0256vw, 2.5rem);} .pad-t-m{padding-top: clamp(4rem, 3.76915rem + 1.026vw, 5rem);} .pad-t-l{padding-top: clamp(7rem, 6.76915rem + 1.026vw, 8rem);} /* PADDING BOTTOM */ .pad-b-s{padding-bottom: clamp(1.5rem, 1.2692rem + 1.0256vw, 2.5rem);} .pad-b-m{padding-bottom: clamp(4rem, 3.76915rem + 1.026vw, 5rem);} .pad-b-l{padding-bottom: clamp(7rem, 6.76915rem + 1.026vw, 8rem);}