Responsive Product Card Component using CSS flex & Css Variables

Aloha! This is my first project here and I am really excited. As you may notice, I used CSS Variables to change margin-bottom property on many elements. The reason is that if I had to write a single rule for every single element multiple times, readability would have been affected negatively. I thought variables would make code much more readable and easier to alter and review. Is there a best practice for such situations, or a better way to achieve the same result? Thank you in advance.