javascript – Tips on how to regulate the dimensions of the MUI-card for small display screen?

The cardboard width seems too small on small display screen sizes, how can I regulate its width?

I recreated this in codesandbox: https://codesandbox.io/s/nameless-darkness-d8tsq9?file=/demo.js

The width is just too small for this display screen dimension:

codes:

export default operate ImgMediaCard() {
  return (
    <part fashion={{ padding: "5rem", flexGrow: "1" }}>
      <Field sx={{ show: "flex", justifyContent: "heart", flexWrap: "wrap" }}>
        <Card sx={{ maxWidth: 350, margin: "1rem" }}>
          <CardMedia
            part="img"
            alt="inexperienced iguana"
            peak="200"
            picture="https://cdn.pixabay.com/picture/2015/04/23/22/00/tree-736885_960_720.jpg"
          />
          <CardContent>
            <Typography gutterBottom variant="h5" part="div">
              Lizard
            </Typography>
            <Typography variant="body2" shade="textual content.secondary">
              Lizards are a widespread group of squamate reptiles, with over
              6,000 species, ranging throughout all continents besides Antarctica
            </Typography>
          </CardContent>
          <CardActions>
            <Button dimension="small">Share</Button>
            <Button dimension="small">Be taught Extra</Button>
          </CardActions>
        </Card>
        {/* 2nd card */}
        <Card sx={{ maxWidth: 350, margin: "1rem" }}>
          <CardMedia
            part="img"
            alt="inexperienced iguana"
            peak="200"
            picture="https://cdn.pixabay.com/picture/2015/04/23/22/00/tree-736885_960_720.jpg"
          />
          <CardContent>
            <Typography gutterBottom variant="h5" part="div">
              Lizard
            </Typography>
            <Typography variant="body2" shade="textual content.secondary">
              Lizards are a widespread group of squamate reptiles, with over
              6,000 species, ranging throughout all continents besides Antarctica
            </Typography>
          </CardContent>
          <CardActions>
            <Button dimension="small">Share</Button>
            <Button dimension="small">Be taught Extra</Button>
          </CardActions>
        </Card>
      </Field>
    </part>
  );
}