1width: 100%;
2margin-left: auto;
3box-sizing: border-box;
4margin-right: auto;
5display: block;
6padding-left: 16px;
7padding-right: 16px;

1<Box component="section">This Box renders as an HTML section element.</Box>

1<Box sx={{ p: 2, border: "1px dashed grey" }}>
2  This Box renders as an HTML section element.
3</Box>

1import { useTheme } from "@mui/system";
2
3
4const Comp = () => {
5	const theme = useTheme();
6  ...
7}

1  <AppButton
2    sx={{
3      position: "fiex",
4      top: { all: 22, tablet: 100 },
5      right: { all: 15, tablet: 40 },
6      display: { all: "flex", tablet: "none" },
7      color: "teal.500",
8      placeItems: "center",
9      gap: 0.5,
10    }}
11    onClick={handleBack}
12  >
13    <AppIcon name="ChevronLeft" size="extra-small" />
14    <Typography variant="tag" color="neutral.100" textTransform="uppercase">
15      back
16    </Typography>
17  </AppButton>
18	);