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

import Discussion from '../../../components/Discussion/Discussion'
import { withRouter } from 'next/router'
import { mediaQueries } from '@project-r/styleguide'
import { css } from 'glamor'
import { compose, graphql } from 'react-apollo'
import gql from 'graphql-tag'

import { VOTING_COOP_201907_BUDGET_SLUG } from '../constants'
import voteT from '../voteT'
import { Body, Section, Title } from '../text'
import Loader from '../../Loader'

const styles = {
  discussion: css({
    margin: '0 0 20px 0',
    [mediaQueries.lUp]: {
      margin: '30px 0'
    }
  })
}

const DISCUSSION_SLUG = VOTING_COOP_201907_BUDGET_SLUG

const DiscussionPage = ({ router, data, vt }) => {
  const meta = {
    title: vt('info/title'),
    description: vt('info/description')
  }

  return (

const { P } = Interaction

const styles = {
  actions: css({
    margin: '0 0 20px 0',
    [mediaQueries.lUp]: {
      margin: '30px 0'
    }
  }),
  anchor: css({
    display: 'block',
    position: 'relative',
    visibility: 'hidden',
    top: -HEADER_HEIGHT_MOBILE,
    [mediaQueries.lUp]: {
      top: -HEADER_HEIGHT
    }
  }),
  image: css({
    margin: '25px 0'
  }),
  thankyou: css({
    margin: '25px auto',
    maxWidth: 550,
    padding: 25,
    background: colors.primaryBg,
    textAlign: 'center'
  }),
  chart: css({
    margin: '30px auto',
    [mediaQueries.mUp]: {

import AddressEditor from '../AddressEditor'
import VoteResult from '../VoteResult'
import md from 'markdown-in-js'
import { mdComponents } from '../text'

import {
  VOTINGS_COOP_201912 as VOTINGS,
  VOTING_COOP_201912_REPORT_SLUG
} from '../constants'

const { P, H2 } = Interaction

const styles = {
  actions: css({
    margin: '0 0 20px 0',
    [mediaQueries.lUp]: {
      margin: '30px 0'
    }
  }),
  anchor: css({
    display: 'block',
    position: 'relative',
    visibility: 'hidden',
    top: -HEADER_HEIGHT_MOBILE,
    [mediaQueries.lUp]: {
      top: -HEADER_HEIGHT
    }
  }),
  image: css({
    margin: '25px 0'
  }),
  thankyou: css({

[mediaQueries.mUp]: {
      margin: '60px 0 80px 0'
    }
  }),
  lead: css({
    textAlign: 'center',
    maxWidth: '820px',
    margin: '12px auto 0 auto',
    [mediaQueries.mUp]: {
      marginTop: '32px'
    }
  }),
  subheader: css({
    marginBottom: 20,
    textAlign: 'center',
    [mediaQueries.lUp]: {
      marginBottom: 30
    }
  }),
  section: css({
    marginBottom: 40,
    [mediaQueries.mUp]: {
      marginBottom: 80
    }
  }),
  employees: css({
    display: 'flex',
    margin: '0 auto',
    maxWidth: '473px'
  }),
  faqCta: css({
    margin: '10px 0',

TeaserFrontTile,
  TeaserFrontTileHeadline,
  TeaserFrontLead
} from '@project-r/styleguide'
import { countFormat } from '../../lib/utils/format'
import withT from '../../lib/withT'

import Results from './Results'

const styles = {
  number: css({
    fontFamily: fontFamilies.sansSerifMedium,
    whiteSpace: 'nowrap',
    lineHeight: '96px',
    fontSize: 80,
    [mediaQueries.lUp]: {
      lineHeight: '140px',
      fontSize: 116
    }
  }),
  lead: css({
    ...fontStyles.sansSerifRegular23
  }),
  big: css({
    fontFamily: fontFamilies.sansSerifMedium,
    lineHeight: '44px',
    fontSize: 38,
    padding: '0 5%',
    marginBottom: 28,
    [mediaQueries.lUp]: {
      marginBottom: 35,
      lineHeight: '72px',

import {
  ELECTION_COOP_MEMBERS_SLUG,
  ELECTION_COOP_PRESIDENT_SLUG,
  ELECTIONS,
  VOTINGS
} from './constants'

const { P } = Interaction

const styles = {
  anchor: css({
    display: 'block',
    position: 'relative',
    visibility: 'hidden',
    top: -HEADER_HEIGHT_MOBILE,
    [mediaQueries.lUp]: {
      top: -HEADER_HEIGHT
    }
  }),
  image: css({
    margin: '25px 0'
  }),
  thankyou: css({
    marginTop: 25,
    padding: 25,
    background: colors.primaryBg
  })
}

class VotePage extends Component {
  constructor(props) {
    super(props)

}
    }
  }),
  label: css({
    padding: '8px 0',
    borderTop: '1px solid #000',
    backgroundColor: '#fff',
    zIndex: ZINDEX_FEED_STICKY_SECTION_LABEL
  }),
  sticky: css({
    top: HEADER_HEIGHT_MOBILE - 1,
    borderBottom: `0.5px solid ${colors.divider}`,
    [mediaQueries.mUp]: {
      top: HEADER_HEIGHT - 1
    },
    [mediaQueries.lUp]: {
      borderBottom: 'none'
    }
  })
}

class StickySection extends Component {
  constructor(props) {
    super(props)
    this.state = {
      sticky: false,
      isMedium: false,
      isSmall: false,
      width: 0,
      height: 0
    }
    this.sectionRef = null

nodes {
      ${testimonialFields}
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}
`

const styles = {
  subheader: css({
    marginBottom: 20,
    textAlign: 'center',
    [mediaQueries.lUp]: {
      marginBottom: 30
    }
  }),
  format: css({
    color: colors.feuilleton
  }),
  quote: css({
    textAlign: 'center',
    margin: '50px 0',
    [mediaQueries.lUp]: {
      margin: '80px 0'
    }
  }),
  employees: css({
    display: 'flex',
    margin: '0 auto',

import { mediaQueries } from '@project-r/styleguide'
import { css } from 'glamor'
import { compose, graphql } from 'react-apollo'
import gql from 'graphql-tag'

import { VOTING_COOP_201912_REPORT_SLUG } from '../constants'
import voteT from '../voteT'
import { Body, Section, Title } from '../text'
import Loader from '../../Loader'
import md from 'markdown-in-js'
import { mdComponents } from '../text'

const styles = {
  discussion: css({
    margin: '0 0 20px 0',
    [mediaQueries.lUp]: {
      margin: '30px 0'
    }
  })
}

const DISCUSSION_SLUG = VOTING_COOP_201912_REPORT_SLUG

const DiscussionPage = ({ router, data, vt }) => {
  const meta = {
    title: vt('info/title'),
    description: vt('info/description')
  }

  return (

}
  }),
  summaryLinks: css({
    width: '100%',
    minHeight: 20,
    display: 'flex',
    borderTop: '1px solid black',
    '& :nth-child(1)': {
      width: '60%'
    }
  }),
  details: css({
    width: '100%',
    marginTop: 10,
    marginBottom: 5,
    [mediaQueries.lUp]: {
      marginTop: 5
    }
  }),
  portrait: css({
    display: 'block',
    backgroundColor: '#E2E8E6',
    width: 104,
    height: 104,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    filter: 'grayscale(1)',
    marginRight: 15
  }),
  profile: css({
    marginTop: 5,
    display: 'flex',