How to use the polished.rem function in polished

background: 'transparent',
            display: 'block',
            top: '50%',
            position: 'absolute',
            right: rem(18),
            transform: 'translate(0, -50%)',
          }}
        >
          <i>
        
      }
      css={{
        position: 'relative',
        paddingTop: rem(7),
        paddingLeft: rem(theme.spacings.medium16),
        paddingBottom: rem(7),
        paddingRight: rem(28),
        width: '100%',
      }}
    &gt;
      {children}
    
  )
}
</i>

export function rem(value) {
  return remp(value, fontSizes.base)
}

...borderRadius(
                      'bottom',
                      idx === urls.length - 1
                        ? rem(8, theme.fontSizes.base)
                        : 'none'
                    ),
                    position: 'absolute',
                    top: '50%',
                    left: '50%',
                    transform: 'translate(-50%, -50%)',
                    zIndex: 1,
                    textAlign: 'center',
                    objectFit: 'contain',
                    objectPosition: 'center',
                    height: rem(110, theme.fontSizes.base),
                    width: rem(147, theme.fontSizes.base),
                  }}
                  src={src}
                />
              
            ))}
          {!ready && !failed && (

import React from 'react';
import styled, { css } from 'styled-components';
import * as polished from 'polished';
import { foreground, red } from './colors';

import {
  LiveProvider,
  LiveEditor,
  LiveError,
  LivePreview
} from 'react-live';

const StyledProvider = styled(LiveProvider)`
  border-radius: ${polished.rem(3)};
  box-shadow: 1px 1px 20px rgba(20, 20, 20, 0.27);
  overflow: hidden;
  margin-bottom: ${polished.rem(100)};
  text-align: left;
`;

const LiveWrapper = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: stretch;
  @media (max-width: 600px) {
    flex-direction: column;
  }
`;

`;

const StyledPreview = styled(LivePreview)`
  position: relative;
  padding: 0.5rem;
  background: white;
  color: black;
  height: auto;
  overflow: hidden;

  ${column};
`;

const StyledError = styled(LiveError)`
  display: block;
  padding: ${polished.rem(8)};
  background: ${red};

  color: ${foreground};
  white-space: pre-wrap;
  text-align: left;
  font-size: 0.9em;
  font-family: 'Source Code Pro', monospace;
`;

const LiveEdit = ({ noInline, code }) => (
  
    
      
        
      

position: relative;
  top: ${rem(3)};

  display: inline-block;
  vertical-align: baseline;
  margin-left: ${rem(12)};
  width: ${rem(14)};
  height: ${rem(21)};
`

const PageLink = styled.a.attrs({
  target: p => !p.external ? undefined : '_blank',
  rel: p => !p.external ? undefined : 'noopener'
})`
  display: block;
  margin-bottom: ${rem(9)};
  cursor: pointer;
  text-decoration: none;
  color: #aa266f;
  font-size: ${rem(24)};
  font-weight: 600;
  text-align: center;

  &:hover {
    text-decoration: underline;
  }
`

const Link = styled.a.attrs({
  target: '_blank',
  rel: 'noopener'
})`

const WideField = props => 

dispatch({type: FETCH_FAILED, error})
      }
    },
    state.hashes.filter(x => !x.ready).length > 0 ? 1000 : null
  )

  return (

function Words({words}) {
  const {flips, currentIndex} = useValidationState()
  const dispatch = useValidationDispatch()

  const haveWords = words && words.length
  const {irrelevantWords} = flips[currentIndex]
  const hasQualified = irrelevantWords !== null && irrelevantWords !== undefined

  return (
    
      
        Are both keywords relevant to the flip?