Purchase > Payment Methods: Clean up styles payment details grid

[jjchrisdiehl]

While adding the Business Card badge to the Payment Methods section, I saw an opportunity to clean up the styling for these payment method rows. Over time, the scss became a bit messy and there was a number of UI bugs that this PR aims to fix.

Proposed Changes

Before

375px	768	1440

After

375px	768	1440

Primary changes

• Period removed from "Use as backup." checkbox label
• Reversed position of card name and card number/expiry - I believe this reads better, especially if customers are providing a human readable name for their cards
• Corrected grid spacing when collapsing from desktop rows to mobile columns - before the right column on desktop would awkwardly collapse interspersed between the left columns rows. There was also so strange text alignment behavior. Now it all collapses succinctly
• Removed usage of non-logical spaced margins in favor of flexbox gaps - this creates a more even spacing across languages and devices
• Added a mixin to properly space items while preserving the empty logo column and resetting spacing as needed
• Replaced any hardcoded colors or font-sizes with their theme based sass variable

Testing Instructions

• Go to Purchases > Payment Methods
• Click on all clickable surfaces, ensure they still work as expected
• Resize the window and ensure the columns and rows collapse correctly and that all elements are accessible to clicks and taps

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-139328

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-139328&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-139328&env=a8c-for-agencies

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/payment-method-section-styles on your sandbox.

[sirbrillig]

This looks good to me! One caveat about removing the period but otherwise good to go.

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/17330157

Thank you @jjchrisdiehl for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.