need a little bit of code review

<Box className={styles.container}>
  <Box sx={{display: 'grid', placeItems: 'center', height: '100vh'}}>
    <Box sx={{border: 'solid black', borderRadius: '2rem', padding: '2rem', boxShadow: '0 1rem black', background: 'white'}}>
      <Typography className={styles.rulesHeader}>RULES</Typography>
      <Box sx={{display: 'flex', flexDirection: 'column'}}>
        <Box>
          <Typography className={styles.objective} sx={{fontWeight: 600, color: '#7945FF !important'}}>OBJECTIVE</Typography>
          <Typography className={styles.objective}>Be the first player to connect 4 of the same colored discs in a row (either
                        vertically, horizontally, or diagonally).</Typography>
        </Box>
        <Box sx={{position: 'relative'}}>
          <Typography className={styles.howToPlay}>HOW TO PLAY</Typography>
          <List sx={{counterReset: 'counter'}}>
            <ListItem className={styles.rules}>Red goes first in the first game.</ListItem>
            <ListItem className={styles.rules}>Players must alternate turns, and only one disc can be dropped in each turn.</ListItem>
            <ListItem className={styles.rules}>The game ends when there is a 4-in-a-row or a stalemate.</ListItem>
            <ListItem className={styles.rules}>The starter of the previous game goes second on the next game.</ListItem>
          </List>
        </Box>
        <Button variant='contained' sx={{borderRadius: '50%'}}>&#10003;</Button>
      </Box>
    </Box>
  </Box>
</Box>