Show three Express Payments buttons in-line (#8601)

Author: nielslange

assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss

@@ -7,9 +7,10 @@ $border-radius: 5px;
 
 	.wc-block-components-express-payment__event-buttons {
 		list-style: none;
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(calc(33% - 10px), 1fr));
+		grid-gap: 10px;
+		box-sizing: border-box;
 		width: 100%;
 		padding: 0;
 		margin: 0;
@@ -18,13 +19,20 @@ $border-radius: 5px;
 
 		> li {
 			margin: 0;
+			width: 100%;
 
 			> img {
 				width: 100%;
 				height: 48px;
 			}
 		}
 	}
+
+	@include breakpoint("<782px") {
+		.wc-block-components-express-payment__event-buttons {
+			grid-template-columns: 1fr;
+		}
+	}
 }
 
 .wc-block-components-express-payment--checkout {
@@ -85,28 +93,6 @@ $border-radius: 5px;
 			margin-bottom: em($gap);
 		}
 	}
-
-	.wc-block-components-express-payment__event-buttons {
-		> li {
-			box-sizing: border-box;
-			display: inline-block;
-			width: 50%;
-		}
-
-		> li:nth-child(even) {
-			padding-left: $gap-smaller;
-		}
-
-		> li:nth-child(odd) {
-			padding-right: $gap-smaller;
-		}
-
-		> li:only-child {
-			display: block;
-			width: 100%;
-			padding: 0;
-		}
-	}
 }
 
 .wc-block-components-express-payment--cart {