Spacing needs to be change in/between elements on Cart and Checkout

[ralucaStan]

Describe the bug

This is a follow-up of woocommerce/woocommerce-blocks#10889.
We need to improve the spacing overall in the Checkout blocks.

Expected behavior

See the screenshots section below

Screenshots

[tarunvijwani]

@elizaan36 During the initial review of the cart page, I found some areas for improvement in other elements on the Cart page. I would appreciate your thoughts on adding some spacing around them.

After updating the suggested gaps	Needs improvement

I was also thinking of revisiting all the elements, including the cross-sells section, and having the production ready design in Figma for spacing as we did in the last issue to reduce the back-and-forth discussions. I'd love to hear your thoughts about it.

Here are the current Cart and Checkout screens in the Twenty Twenty-Four theme(without any adjustments):

[nikkivias]

@tarunvijwani I can look into this and mockup spacing only improvements to the existing experience

[elizaan36]

Thanks @tarunvijwani for bringing this up. Will be great to have a consistent vertical grid across the Cart, Checkout, and Order Confirmation.

And thanks @nikkivias for looking into this! In the first comment screenshot, I used a 16/24 spacing for Cart and Checkout, pulling the relevant variables from this list.

[nikkivias]

Hi Tarun, I've laid out the spacing specs on this Figma file for checkout and cart. For mobile versions, i only add specs where it deviates from desktop. Please feel free to tag me on Figma if you have any questions, or I missed anything. Thank you!