/** @jsx jsx */
import { jsx } from "theme-ui"

const Breakout = ({ children }) => (
  <div
    sx={{
      display: `grid`,
      placeContent: `center`,
      width: `98vw`,
      position: `relative`,
      left: `50%`,
      right: `50%`,
      marginLeft: `-49vw`,
      marginRight: `-49vw`,
    }}
  >
    {children}
  </div>
)

export default Breakout

@@ -45,13 +45,31 @@
 i%22%0A%0A
-const
+export default function
  Bre
@@ -77,11 +77,8 @@
 kout
- = 
 (%7B c
@@ -92,13 +92,23 @@
  %7D) 
-=%3E
+%7B%0A  return
  (%0A
+  
   %3Cd
@@ -118,14 +118,18 @@
     
+  
 sx=%7B%7B%0A
+  
     
@@ -153,16 +153,18 @@
 ,%0A      
+  
 placeCon
@@ -185,16 +185,18 @@
 ,%0A      
+ 
+ 
 width: %60
@@ -198,24 +198,26 @@
 th: %6098vw%60,%0A
+  
       positi
@@ -238,16 +238,18 @@
 ,%0A      
+ 
+ 
 left: %605
@@ -249,24 +249,26 @@
 eft: %6050%25%60,%0A
+  
       right:
@@ -285,18 +285,12 @@
     
+ 
-marginLeft
+ mx
 : %60-
@@ -306,41 +306,19 @@
     
-marginRight: %60-49vw%60,
+%7D%7D
 %0A    
-%7D%7D
+%3E
 %0A  
-%3E%0A
     
@@ -328,16 +328,18 @@
 ildren%7D%0A
+  
   %3C/div%3E
@@ -343,31 +343,10 @@
 iv%3E%0A
-)%0A%0Aexport default Breakout
+  )%0A%7D
 %0A

tidy breakout component (#25551)