old_contents: /** @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
  
new_contents: /** @jsx jsx */
  import { jsx } from "theme-ui"
  
  export default function Breakout({ children }) {
    return (
      <div
        sx={{
          display: `grid`,
          placeContent: `center`,
          width: `98vw`,
          position: `relative`,
          left: `50%`,
          right: `50%`,
          mx: `-49vw`,
        }}
      >
        {children}
      </div>
    )
  }
  
subject: tidy breakout component (#25551)