💄 Fix the payment method item grid layout

modules/ppcp-settings/resources/css/_variables.scss

@@ -73,4 +73,5 @@ $card-vertical-gap: 48px;
 
 	// Default visual effects.
 	--box-shadow-active-item: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+	--container-border-radius: 8px;
 }

modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss

@@ -1,58 +1,60 @@
-.ppcp-r-settings-block__payment-methods {
-	&.ppcp-r-settings-block {
-		display: flex;
-		flex-wrap: wrap;
-		flex-direction: row;
-		gap: 16px;
+// Grid layout.
+.ppcp-r-settings-block.ppcp--grid > .ppcp--content {
+	--block-separator-gap: 0;
+
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 16px;
+
+	@media screen and (max-width: 767px) {
+		grid-template-columns: repeat(2, 1fr);
 	}
 
-	&__item {
+	@media screen and (max-width: 480px) {
+		grid-template-columns: 1fr;
+	}
+}
+
+// Theming & visual styles.
+.ppcp-r-settings-block__payment-methods {
+	.ppcp-r-settings-block {
 		display: flex;
 		align-items: flex-start;
-		width: calc(100% / 3 - 32px / 3);
 		border: 1px solid $color-gray-300;
+		border-radius: var(--container-border-radius);
 		padding: 16px;
-		border-radius: 8px;
 		min-height: 200px;
 
-		@media screen and (max-width: 767px) {
-		    width: calc(50% - 8px);
-		}
-
-		@media screen and (max-width: 480px) {
-		    width: 100%;
-		}
-
-		&__inner {
+		.ppcp--method-inner {
 			display: flex;
 			flex-direction: column;
 			height: 100%;
 		}
 
-		&__title-wrapper {
+		.ppcp--method-title-wrapper {
 			display: flex;
 			align-items: center;
 			margin: 0 0 8px 0;
 			gap: 12px;
 		}
 
-		&__description {
+		.ppcp--method-description {
 			p {
+				@include font(13, 20, 400);
 				margin: 0;
 				color: $color-text-tertiary;
-				@include font(13, 20, 400);
 			}
 
 			margin: 0 0 12px 0;
 		}
 
-		&__title {
+		.ppcp--method-title {
 			@include font(13, 20, 500);
 			color: $color-black;
 			display: block;
 		}
 
-		&__settings {
+		.ppcp--method-settings {
 			line-height: 0;
 			transition: 0.2s ease-out transform;
 			transform: rotate(0deg);
@@ -68,7 +70,7 @@
 			@include small-button;
 		}
 
-		&__footer {
+		.ppcp--method-footer {
 			display: flex;
 			justify-content: space-between;
 			align-items: center;

modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss

@@ -16,7 +16,7 @@
 	@media screen and (min-width: 960px) {
 		--card-width-header: 280px;
 		--card-width-content: 610px;
-		--card-gap: 48px;
+		--card-gap: 24px;
 		--card-layout: flex;
 	}
 

modules/ppcp-settings/resources/css/components/screens/settings/_tab-paylater-configurator.scss

@@ -1,7 +1,7 @@
 .ppcp-r-paylater-configurator {
 	display: flex;
 	border: 1px solid var(--color-separators);
-	border-radius: 8px;
+	border-radius: var(--container-border-radius);
 	overflow: hidden;
 	font-family: "PayPalPro", sans-serif;
 	-webkit-font-smoothing: antialiased;

modules/ppcp-settings/resources/css/components/screens/settings/_tab-styling.scss

@@ -8,7 +8,7 @@
 
 	display: flex;
 	border: 1px solid var(--color-separators);
-	border-radius: 8px;
+	border-radius: var(--container-border-radius);
 
 	.ppcp-r-settings-block {
 		&.header-section {

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js

@@ -11,21 +11,21 @@ const PaymentMethodItemBlock = ( {
 	isSelected,
 } ) => {
 	return (
-		<SettingsBlock className="ppcp-r-settings-block__payment-methods__item">
-			<div className="ppcp-r-settings-block__payment-methods__item__inner">
-				<div className="ppcp-r-settings-block__payment-methods__item__title-wrapper">
+		<SettingsBlock className="ppcp--method-item" separatorAndGap={ false }>
+			<div className="ppcp--method-inner">
+				<div className="ppcp--method-title-wrapper">
 					<PaymentMethodIcon
 						icons={ [ paymentMethod.icon ] }
 						type={ paymentMethod.icon }
 					/>
-					<span className="ppcp-r-settings-block__payment-methods__item__title">
+					<span className="ppcp--method-title">
 						{ paymentMethod.itemTitle }
 					</span>
 				</div>
-				<p className="ppcp-r-settings-block__payment-methods__item__description">
+				<p className="ppcp--method-description">
 					{ paymentMethod.itemDescription }
 				</p>
-				<div className="ppcp-r-settings-block__payment-methods__item__footer">
+				<div className="ppcp--method-footer">
 					<ToggleControl
 						__nextHasNoMarginBottom={ true }
 						checked={ isSelected }
@@ -33,7 +33,7 @@ const PaymentMethodItemBlock = ( {
 					/>
 					{ paymentMethod?.fields && onTriggerModal && (
 						<div
-							className="ppcp-r-settings-block__payment-methods__item__settings"
+							className="ppcp--method-settings"
 							onClick={ onTriggerModal }
 						>
 							{ data().getImage( 'icon-settings.svg' ) }

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js

@@ -2,11 +2,7 @@ import SettingsBlock from '../SettingsBlock';
 import PaymentMethodItemBlock from './PaymentMethodItemBlock';
 import { usePaymentMethods } from '../../../data/payment/hooks';
 
-const PaymentMethodsBlock = ( {
-	paymentMethods,
-	className = '',
-	onTriggerModal,
-} ) => {
+const PaymentMethodsBlock = ( { paymentMethods, onTriggerModal } ) => {
 	const { setPersistent } = usePaymentMethods();
 
 	if ( ! paymentMethods?.length ) {
@@ -21,9 +17,7 @@ const PaymentMethodsBlock = ( {
 	};
 
 	return (
-		<SettingsBlock
-			className={ `ppcp-r-settings-block__payment-methods ${ className }` }
-		>
+		<SettingsBlock className="ppcp--grid ppcp-r-settings-block__payment-methods">
 			{ paymentMethods.map( ( paymentMethod ) => (
 				<PaymentMethodItemBlock
 					key={ paymentMethod.id }