In a grid layout, gap configured in breakpoints won't work

[bitweedx86]

Bug report

Describe the bug

When writing a stitches object, the grid column/row object won't apply on the element.

To Reproduce

The object looks like this:

const TablesGrid = styled('div', {
  display: 'grid',

  variants: {
    gap: {
      horizontal: {
        gap: 4,
        gridTemplateColumns: '1fr 1fr',
      },
      vertical: {
        gap: 16,
        gridTemplateColumns: '1fr',
      },
    },
  },
});

Expected behavior

Expected that the gap will be applied based on different breakpoint.

Screenshots

System information

• OS: macOS
• Browser (if applies) Chrome
• Version of Stitches: 1.2.8
• Version of Node.js: v16.18.1

[bitweedx86]

This is the setup of the breakpoints.

And it did work if I setup like this: