dmc card responsivity - plotly dash

I've got multiple dmc.card items within a dash app layout. I've got them set to a specific height and width. I've also instilled base, sm, md, lg values to account for a responsive change in screen settings.

I'm trying to achieve the same response that the traditional dbc.Card performs. That is, when the screen size is reduced, the cards keep their same layout but reduce in width.

I don't want the cards to split into separate rows.

Is there a way for dmc.card to operate the same way?

import dashfrom dash import dccfrom dash import htmlfrom dash.dependencies import Input, Outputimport dash_bootstrap_components as dbcimport plotly.express as pximport pandas as pdimport dash_mantine_components as dmcexternal_stylesheets = [dbc.themes.COSMO, dbc.icons.BOOTSTRAP]app = dash.Dash(__name__, external_stylesheets = external_stylesheets)carddbc = dbc.Card(    [        dbc.CardBody(            [                html.P('', className = 'card-text'),            ]        ),    ],     style = {'height':'100%'})card1 = dmc.Card(    html.Div(children = [        dcc.Checklist(['','','','',''],                      ),    ],    ),    w={"base": 100, "sm": 180,"md": 300, "lg": 300},    py={"base": "xs", "sm": "md", "lg": "xl"},    bg={"base": "blue.7", "sm": "red.7", "lg": "green.7"},    withBorder=True,    shadow='sm',    radius='md',    h=275,)card2 = dmc.Card(    html.Div(children = [        dcc.Checklist(['','','','',''],                      ),    ],    ),    w={"base": 100, "sm": 180,"md": 300, "lg": 300},    py={"base": "xs", "sm": "md", "lg": "xl"},    bg={"base": "blue.7", "sm": "red.7", "lg": "green.7"},    withBorder=True,    shadow='sm',    radius='md',    h=275,)card3 = dmc.Card(    html.Div(children = [        dcc.Checklist(['','','','',''],                      ),    ],    ),    w={"base": 100, "sm": 180,"md": 300, "lg": 300},    py={"base": "xs", "sm": "md", "lg": "xl"},    bg={"base": "blue.7", "sm": "red.7", "lg": "green.7"},    withBorder=True,    shadow='sm',    radius='md',    h=275,)app.layout = dbc.Container([    dbc.Row([        dbc.Col([        ], xs = 2, sm = 2, md = 2, lg = 2        ),        dbc.Col([            dbc.Row([                dbc.Col(carddbc, width = {'size':3}),                dbc.Col(carddbc, width = {'size':3}),                dbc.Col(carddbc, width = {'size':3}),            ], justify = 'center'),            dbc.Row([                dbc.Col([                ], xs = 4, sm = 4, md = 4, lg = 4),                dbc.Col([                    dbc.Card([                    dbc.CardBody([                        dbc.Row([                            dbc.Col([                                dcc.Graph()                            ],                             ),                            dbc.Row([                            dbc.Col(html.Div(card1), className = ''),                                dbc.Col(html.Div(card2), className = ''),                            dbc.Col(html.Div(card3), className = ''),                            ]                            )                        ]),                    ],                     )                    ])                ], xs = 8, sm = 8, md = 8, lg = 8),            ])        ], xs = 10, sm = 10, md = 10, lg = 10)    ])], fluid = True)if __name__ == '__main__':    app.run_server(debug = True)