break cards into one row at large sizes

frontend/src/metabase/css/core/grid.css

@@ -239,6 +239,9 @@
   .large-Grid--guttersXXl > .Grid-cell {
     padding: 5em 0 0 5em;
   }
+  .large-Grid--normal > .Grid-cell {
+    flex: 1;
+  }
 }
 
 .Grid-cell.Cell--1of3 {

frontend/src/metabase/css/core/layout.css

@@ -34,6 +34,10 @@
 .block,
 :local(.block)        { display: block; }
 
+@media screen and (--breakpoint-min-lg) {
+.lg-block { display: block; }
+}
+
 .inline,
 :local(.inline)       { display: inline; }
 
@@ -76,6 +80,18 @@
     }
 }
 
+@media screen and (--breakpoint-min-lg) {
+  .wrapper.lg-wrapper--trim {
+        max-width: var(--lg-width);
+  }
+}
+
+@media screen and (--breakpoint-min-xl) {
+  .wrapper.lg-wrapper--trim {
+        max-width: var(--xl-width);
+  }
+}
+
 /* fully fit the parent element - use as a base for app-y pages like QB or settings */
 .spread, :local(.spread) {
   position: absolute;

frontend/src/metabase/new_query/components/NewQueryOption.jsx

@@ -22,7 +22,7 @@ export default class NewQueryOption extends Component {
                className="bg-white p3 align-center bordered rounded cursor-pointer transition-all text-centered"
                style={{
                    boxShadow: hover ? "0 3px 8px 0 rgba(220,220,220,0.50)" : "0 1px 3px 0 rgba(220,220,220,0.50)",
-                   height: "310px"
+                   height: 340
                }}
                onMouseOver={() => this.setState({hover: true})}
                onMouseLeave={() => this.setState({hover: false})}

frontend/src/metabase/new_query/containers/NewQuery.jsx

@@ -139,10 +139,9 @@ export class NewQuery extends Component {
         } else {
             return (
                 <div className="bg-slate-extra-light full-height flex">
-                    <div className="flex-full full ml-auto mr-auto px1 mt4 mb2 align-center"
-                         style={{maxWidth: "800px"}}>
+                    <div className="wrapper wrapper--trim lg-wrapper--trim xl-wrapper--trim flex-full px1 mt4 mb2 align-center">
                          <div className="full-height flex align-center justify-center">
-                            <ol className="flex-full Grid Grid--guttersXl Grid--full small-Grid--1of2">
+                            <ol className="flex-full Grid Grid--guttersXl Grid--full small-Grid--1of2 large-Grid--normal">
                                 <li className="Grid-cell">
                                     <NewQueryOption
                                         image="/app/img/questions_illustration"