Convert `grid.module.css` to CSS modules (#40564)

frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/DatePicker.jsx

@@ -54,15 +54,15 @@ const MultiDatePicker = ({
   hideTimeSelectors,
 }) => (
   <div className={className}>
-    <div className="Grid Grid--1of2 Grid--gutters">
-      <div className="Grid-cell">
+    <div className={cx(CS.Grid, CS.Grid1of2, CS.GridGutters)}>
+      <div className={CS.GridCell}>
         <SpecificDatePicker
           value={startValue}
           hideTimeSelectors={hideTimeSelectors}
           onChange={value => onFilterChange([op, field, value, endValue])}
         />
       </div>
-      <div className="Grid-cell">
+      <div className={CS.GridCell}>
         <SpecificDatePicker
           value={endValue}
           hideTimeSelectors={hideTimeSelectors}

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

-:global(.Grid) {
+.Grid {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
@@ -6,36 +6,18 @@
   padding: 0;
 }
 
-:global(.Grid-cell) {
+.GridCell {
   flex: 1;
 }
 
-:global(.Grid--1of2 > .Grid-cell) {
+.Grid1of2 > .GridCell {
   flex: 0 0 50%;
 }
 
-@media (--breakpoint-min-sm) {
-  :global(.small-Grid--1of2 > .Grid-cell) {
-    flex: 0 0 50%;
-  }
-}
-
-@media (--breakpoint-min-md) {
-  :global(.md-Grid--1of2 > .Grid-cell) {
-    flex: 0 0 50%;
-  }
-}
-
-@media (--breakpoint-min-lg) {
-  :global(.large-Grid--1of2 > .Grid-cell) {
-    flex: 0 0 50%;
-  }
-}
-
-:global(.Grid--gutters) {
+.GridGutters {
   margin: -1em 0 1em -1em;
 }
 
-:global(.Grid--gutters > .Grid-cell) {
+.GridGutters > .GridCell {
   padding: 1em 0 0 1em;
 }

frontend/src/metabase/visualizations/components/ObjectDetail/ObjectDetailHeader.tsx

 import EntityMenu from "metabase/components/EntityMenu";
 import Button from "metabase/core/components/Button";
+import CS from "metabase/css/core/index.css";
 import { Flex } from "metabase/ui/components";
 
 import {
@@ -39,8 +40,8 @@ export function ObjectDetailHeader({
   closeObjectDetail,
 }: ObjectDetailHeaderProps): JSX.Element {
   return (
-    <ObjectDetailHeaderWrapper className="Grid">
-      <div className="Grid-cell">
+    <ObjectDetailHeaderWrapper className={CS.Grid}>
+      <div className={CS.GridCell}>
         <h2 className="p3">
           {objectName}
           {objectId !== null && <ObjectIdLabel> {objectId}</ObjectIdLabel>}