How to use the styled-bootstrap-grid.media.lg function in styled-bootstrap-grid

`};

  :not([disabled]):hover {
    color: ${(props: { variant: string }) => fontColors[props.variant]};
    opacity: 0.9;
  }

  ${(props: { variant: string, disabled: boolean }) =>
    props.disabled &&
    css`
      opacity: 0.9;
      cursor: not-allowed;

      background-color: ${colors.shadeBeta};
      color: ${rgba(colors.white, 0.95)};
    `} ${media.lg`
    font-size: 14px;
  `};
`

export const Spinner = styled.span`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transition-duration: 250ms;
  position: absolute;
  top: -28px;
  height: 28px;
  left: 0;
  transform: ${(props: { loading: boolean }) =>
    props.loading ? 'translate3d(0, 2.5rem, 0)' : 'translate3d(0, 0, 0)'};