src/layouts/StickySideColumns.module.scss

@@ -22,3 +22,8 @@
   flex-direction: column;
   grid-gap: 15px;
 }
+.content {
+  max-width: 550px;
+  width: 100%;
+  margin: 0 auto;
+}

src/layouts/StickySideColumns.tsx

@@ -1,29 +1,26 @@
 import { PropsWithChildren, ReactNode } from 'react'
 
-import styles from './Files.module.scss'
+import styles from './StickySideColumns.module.scss'
 
-interface FilesProps {
-  left: ReactNode
-  right: ReactNode
-  content: ReactNode
+interface StickySideColumnsProps {
+  left?: ReactNode
+  right?: ReactNode
 }
 
-export const Files = ({
+export const StickySideColumns = ({
   left,
   right,
-  content,
   children
-}: PropsWithChildren<FilesProps>) => {
+}: PropsWithChildren<StickySideColumnsProps>) => {
   return (
     <div className={styles.container}>
       <div className={`${styles.sidesWrap} ${styles.files}`}>
         <div className={styles.sides}>{left}</div>
       </div>
-      <div className={styles.content}>{content}</div>
+      <div className={styles.content}>{children}</div>
       <div className={styles.sidesWrap}>
         <div className={styles.sides}>{right}</div>
       </div>
-      {children}
     </div>
   )
 }