Responsive result component using CSS Grid

This challenge was quite challenging. It's been a long time since I worked with CSS Grid.

I had a problem adding a margin to create white space around the result component when changing from the single-column layout to the double-column layout.

The margin messes up the single-column layout whenever it is very close to its width is very close to transition width.

I eventually didn't add the margin.

Can anyone help with how I can add some margin or give some white space if I transition to the double-column layout, without messing up the code?