Reusable media queries with Styled Components

mediaQuery.js

import { css } from 'styled-components';

export const breakpoint = {
  medium: '48em',
  large: '64em',
};

export const media = {
  // ns = not small
  ns: (...args) =>
    css`
      @media screen and (min-width: ${breakpoint.medium}) {
        ${css(...args)}
      }
    `,
  medium: (...args) =>
    css`
      @media screen and (min-width: ${breakpoint.medium}) and (max-width: ${breakpoint.large}) {
        ${css(...args)}
      }
    `,
  large: (...args) =>
    css`
      @media screen and (min-width: ${breakpoint.large}) {
        ${css(...args)}
      }
    `,
};

Title.js

import styled from 'styled-components';
import { media } from 'utils/mediaQuery';

const Title = styled.h1`
  font-size: 24px;
  ${media.medium`
    font-size: 30px;
  `}
  ${media.large`
    font-size: 36px;
  `}
`;

export default Title;