How to use the @project-r/styleguide.mediaQueries.mUp function in @project-r/styleguide

}),
  padHeader: css({
    // minus 1px for first sticky hr from header
    // - otherwise there is a jump when scroll 0 and opening hamburger
    paddingTop: HEADER_HEIGHT_MOBILE - 1,
    [mediaQueries.mUp]: {
      paddingTop: HEADER_HEIGHT - 1
    }
  }),
  bodyGrower: css({
    flexGrow: 1
  }),
  content: css({
    paddingTop: 40,
    paddingBottom: 60,
    [mediaQueries.mUp]: {
      paddingTop: 80,
      paddingBottom: 120
    }
  })
}

export const MainContainer = ({ children }) => (
  {children}
)

export const Content = ({ children, style }) => (
  <div style="{style}">
    {children}
  </div>
)

label: css({
      ...fontStyles.sansSerifRegular14,
      color: colors.secondary
    }),
    preview: css({
      borderTop: `1px solid ${colors.text}`,
      fontSize: fontSize
    }),
    subhead: css({
      marginTop: 12,
      textOverflow: 'ellipsis',
      overflow: 'hidden',
      whiteSpace: 'nowrap',
      fontSize: '1.1875em',
      lineHeight: '1.25',
      [mediaQueries.mUp]: {
        fontSize: '1.5em'
      }
    }),
    paragraph: css({
      fontSize: '1.0625em',
      lineHeight: '1.578em',
      [mediaQueries.mUp]: {
        fontSize: '1.1875em'
      }
    })
  }

  const trackFontSize = action => {
    track(['trackEvent', 'FontSize', action, fontPercentage.current])
  }

import { PUBLIC_BASE_URL, CDN_FRONTEND_BASE_URL } from '../lib/constants'

const styles = {
  container: css({
    backgroundColor: '#E9A733',
    color: '#fff',
    minHeight: '100vh'
  }),
  logoContainer: css({
    textAlign: 'center',
    paddingTop: 25,
    width: 200,
    marginLeft: 'auto',
    marginRight: 'auto',
    [mediaQueries.mUp]: {
      width: 280,
      paddingTop: SPACE * 2
    }
  }),
  whiteOnBlack: css({
    textRendering: 'optimizeLegibility',
    WebkitFontSmoothing: 'antialiased',
    '& ::selection': {
      color: '#000',
      backgroundColor: '#fff'
    }
  }),
  message: css({
    color: '#fff',
    textAlign: 'center',
    ...fontStyles.sansSerifRegular21,

offer: css({
    margin: 0,
    padding: 0,
    '& > li': {
      borderTop: `1px solid ${colors.divider}`,
      display: 'block',
      padding: '10px 30px 10px 0',
      position: 'relative'
    },
    '& > li a': {
      color: colors.text,
      display: 'block',
      textDecoration: 'none',
      fontSize: '17px',
      lineHeight: '22px',
      [mediaQueries.mUp]: {
        fontSize: '20px',
        lineHeight: '24px'
      },
      verticalAlign: 'middle'
    }
  }),
  icon: css({
    marginTop: '-14px',
    position: 'absolute',
    right: '5px',
    top: '50%'
  })
}

const List = ({ t, data }) => (
   (

position: 'relative',
    backgroundColor: colors.primaryBg,
    [mediaQueries.mUp]: {
      paddingTop: 30,
      paddingBottom: 30
    }
  }),
  actions: css({
    display: 'flex',
    flexWrap: 'wrap',
    position: 'relative',
    '& > button': {
      flexGrow: 1,
      margin: '5px 15px 0 0',
      minWidth: '120px',
      [mediaQueries.mUp]: {
        flexGrow: 0,
        margin: '5px 15px 0 0',
        minWidth: '160px'
      }
    }
  }),
  pMargin: css({
    margin: '10px 0',
    [mediaQueries.mUp]: {
      margin: '20px 0'
    }
  })
}

const { H2, P, Emphasis } = Interaction

const styles = {
  container: css({
    paddingTop: 0,
    paddingBottom: 120
  }),
  results: css({
    paddingTop: 5
  }),
  countLoaded: css({
    borderTop: `1px solid ${colors.text}`,
    display: 'flex',
    justifyContent: 'space-between',
    padding: '15px 0',
    textAlign: 'left',
    ...fontStyles.sansSerifRegular16,
    [mediaQueries.mUp]: {
      ...fontStyles.sansSerifRegular21
    }
  }),
  button: css({
    outline: 'none',
    WebkitAppearance: 'none',
    background: 'transparent',
    border: 'none',
    cursor: 'pointer',
    padding: 0
  })
}

const ResultsList = ({ nodes }) => {
  const nodeType = nodes[0].entity.__typename

marginBottom: 30
    }
  }),
  link: css({
    textDecoration: 'none',
    color: colors.text,
    ':visited': {
      color: colors.text
    },
    ':hover': {
      color: '#ccc'
    }
  }),
  sticky: css({
    display: 'none',
    [mediaQueries.mUp]: {
      display: 'block',
      position: 'fixed',
      zIndex: 1,
      width: SIDEBAR_WIDTH,
      top: HEADER_HEIGHT,
      backgroundColor: '#fff'
    }
  }),
  button: css({
    marginBottom: 10,
    [mediaQueries.onlyS]: {
      display: 'none'
    }
  }),
  reminderActions: css({
    display: 'block',

.catch(() => {
          setFocusState({ focusError: t('discussion/focus/loadError') })
        })
    }
  }

  React.useEffect(() => {
    fetchFocus()
  })

  const onReload = e => {
    e.preventDefault()
    props.discussionComments.refetch()
  }

  const isDesktop = useMediaQuery(mediaQueries.mUp)

  return (
     {
        const { focus } = discussion.comments

        if (discussion.comments.totalCount === 0) {
          return 
        }

marginTop: SPACE,
      marginBottom: SPACE * 2
    }
  }),
  mainNav: css({
    fontFamily: fontFamilies.sansSerifRegular,
    fontSize: 44,
    lineHeight: '60px'
  }),
  address: css({
    lineHeight: 1.6,
    fontStyle: 'normal'
  }),
  mBr: css({
    display: 'none',
    [mediaQueries.mUp]: {
      display: 'inline'
    }
  }),
  credits: css({
    marginBottom: SPACE * 2,
    marginTop: SPACE,
    maxWidth: 500,
    marginLeft: 'auto',
    marginRight: 'auto'
  })
}

const Highlight = ({children, ...props}) =&gt; <span>{children}</span>
const Strong = ({children}) =&gt; <span>{children}</span>

class EnPage extends Component {

[mediaQueries.mUp]: {
      display: 'flex'
    }
  }),
  portrait: css({
    width: 300 / 3,
    height: 400 / 3,
    [mediaQueries.mUp]: {
      width: 300 / 2,
      height: 400 / 2
    }
  }),
  details: css({
    marginTop: 40,
    marginBottom: 40,
    [mediaQueries.mUp]: {
      marginTop: 0,
      marginLeft: 40
    }
  }),
  errorMessages: css({
    color: colors.error,
    marginTop: 40
  }),
  button: css({
    marginTop: 40,
    width: 170,
    textAlign: 'center'
  })
}