Материал пользовательского интерфейса Tabpanel не использует столбцы

Question

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    width: "100%",
    backgroundColor: theme.palette.background.paper,
  },
  title: {
    [theme.breakpoints.up("sm")]: {
      display: "block",
      maxHeight: 125,
    },
  },
  Alert: {
    margin: theme.spacing(2),
  },
  Logo: {
    width: 50,
    height: 50,
    marginRight: theme.spacing(3),
    [theme.breakpoints.up("sm")]: {
      width: 80,
      height: 80,
    },
  },
}));

export default function ScrollableTabsButtonForce() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <div className={classes.root}>
      <AppBar position="static" color="default">
        <Tabs
          className={classes.title}
          value={value}
          onChange={handleChange}
          variant="scrollable"
          scrollButtons="on"
          indicatorColor="primary"
          textColor="primary"
          aria-label="scrollable force tabs example"
        >
          <Tab
            label="Elite Knight"
            icon={<img className={classes.Logo} src={Knight} alt="Logo" />}
            {...a11yProps(0)}
          />
          <Tab
            label="Royal Paladin"
            icon={<img className={classes.Logo} src={Paladin} alt="Logo" />}
            {...a11yProps(1)}
          />
          <Tab
            label="Master Sorcerer"
            icon={<img className={classes.Logo} src={Sorcerer} alt="Logo" />}
            {...a11yProps(2)}
          />
          <Tab
            label="Elder Druid"
            icon={<img className={classes.Logo} src={Druid} alt="Logo" />}
            {...a11yProps(3)}
          />
        </Tabs>
      </AppBar>
      <Grid container justify="center" alignItems="center">
        <Alert className={classes.Alert} severity="info">
          For more information on how to make a purchase please click on the
          desired script!
        </Alert>
      </Grid>
      <TabPanel value={value} index={0}>
        <Cards voc={0} />
      </TabPanel>
      <TabPanel value={value} index={1}>
        <Cards voc={1} />
      </TabPanel>
      <TabPanel value={value} index={2}>
        <Cards voc={2} />
      </TabPanel>
      <TabPanel value={value} index={3}>
        <Cards voc={3} />
      </TabPanel>
    </div>
  );
}

вот компонент карточек, который он зацикливает на столе и генерирует карточки для другого компонента. Я уже объявил, сколько столбцов для каждого экрана.

независимо от того, что я пробовал, он держит каждую карточку на строка, я попытался отобразить: «Flex» все еще та же проблема.

попытался объявить столбцы на отдельных divs, а также все еще та же проблема.