How to use the @xstyled/system.down function in @xstyled/system

primary: 'color: red',
        secondary: 'color: blue',
    },
})({});

// Responsive Utilities

breakpoints({
    xs: 'color: red',
    md: 'color: blue',
    lg: 'color: green',
})({});

up('md', 'color: red')({});

down('md', 'color: red')({});

between('md', 'lg', 'color: red')({});

// RPX Transformers

rpxTransformers.px(16).toString();
rpxTransformers.px('16rpx').toString();
rpxTransformers.border(10).toString();
rpxTransformers.border('10px solid').toString();

${variant({
    variants: {
      build: css`
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 4;
        max-height: 298.5rpx; // 2x ratio

        ${up(
          'sm',
          css`
            max-height: 380rpx;
          `,
        )}
      `,
      perfect: css`
        ${down(
          'sm',
          css`
            // 2x ration
            width: 93rpx;
            height: 93rpx;
          `,
        )}
      `,
      ci: css`
        ${down(
          'sm',
          css`
            // 2x ration
            width: 158rpx;
            height: 158rpx;
          `,