Increase pattern modal dimensions when creating a new template (#49722)

* Increase pattern modal dimensions

* grid -> flex

* 3 columns on medium, 4 columns on wide

* modal height

packages/edit-site/src/components/start-template-options/style.scss

@@ -3,28 +3,36 @@
 	// and height are used instead of max-(width/height).
 	@include break-small() {
 		width: calc(100% - #{ $grid-unit-20 * 2 });
-		height: calc(100% - #{ $header-height * 2 });
+		height: auto;
 	}
 	@include break-medium() {
-		width: 50%;
+		width: 95%;
 	}
 	@include break-large() {
-		height: fit-content;
+		max-height: 95%;
 	}
 }
 
 .edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
-	display: grid;
+	display: flex;
+	flex-wrap: wrap;
+	gap: $grid-unit-30;
 	width: 100%;
 	margin-top: $grid-unit-05;
-	gap: $grid-unit-30;
-	grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(240px, 100%/10)), 1fr));
 
 	.block-editor-block-patterns-list__list-item {
 		break-inside: avoid-column;
 		margin-bottom: 0;
-		width: 100%;
 		aspect-ratio: 3/4;
+		width: calc(50% - #{ $grid-unit-30 * 1 } / 2);
+
+		@include break-medium() {
+			width: calc(33.333% - #{ $grid-unit-30 * 2 } / 3);
+		}
+
+		@include break-wide() {
+			width: calc(25% - #{ $grid-unit-30 * 3 } / 4);
+		}
 
 		.block-editor-block-preview__container {
 			height: 100%;