pseudo in media query not working

[Cong Nguyen]

Need check:

statsMain: {
    gridArea: 'main',
    position: 'relative',
    borderRadius: 'var(--radius)',
    background: '#fff',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: -25,
    marginBottom: -25,
    marginRight: 0,
    marginLeft: 0,
    boxShadow: '0 0 0 1px var(--accents-2)',
    filter: 'drop-shadow(0 8px 30px rgba(0, 0, 0, .12))',

    ':before': {
      content: '""',
      background: '#fff',
      width: 12,
      height: 12,
      position: 'absolute',
      left: '100%',
      borderRight: '1px solid var(--accents-2)',
      borderTop: '1px solid var(--accents-2)',
      borderTopRightRadius: 4,
      transform: 'translateX(-45%) rotate(45deg)',
    },

    '@media screen and (max-width:768px)': {
      margin: 0,
      borderBottomLeftRadius: 0,
      borderBottomRightRadius: 0,

      ':before': {
        left: 'unset',
        top: '100%',
        transform: 'translateY(-45%) rotate(135deg)',
      },
    },
  },