fixing formatting

build.washingtonpost.com/docs/foundations/principles.mdx

@@ -5,6 +5,7 @@ description: In our pursuit to create a seamless, user-friendly, and visually co
 ---
 
 <BR />
+
 ## Table of contents
 
 - [Reusable](/foundations/principles#1.%20Reusable)
@@ -18,16 +19,17 @@ description: In our pursuit to create a seamless, user-friendly, and visually co
 ## 1. Reusable
 
 <Box css={{display:"flex",alignItems:"start",flexDirection:"row", gap:"$150","@media (max-width: 600px)":{flexDirection:"column-reverse"}}}>
-  <Box css={{width:"100%"}}>
+<Box css={{width:"100%"}}>
 
 ### Component Reusability
 
 - **Modularity:** Design components should be modular, meaning they can be reused in various parts of the application without being modified.
 - **Consistency:** Ensure visual and functional consistency across all platforms and products to foster a unified brand image and enhance user familiarity.
 - **Documentation:** Maintain comprehensive documentation for each component, detailing its purpose, usage guidelines, and implementation code to facilitate easy adoption by other teams and projects.
 
-  </Box>
-<Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
+</Box>
+
+  <Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
   <InlineImage
       width={400}
       height={240}
@@ -42,16 +44,17 @@ description: In our pursuit to create a seamless, user-friendly, and visually co
 ## 2. Functional
 
 <Box css={{display:"flex",alignItems:"start",flexDirection:"row", gap:"$150","@media (max-width: 600px)":{flexDirection:"column-reverse"}}}>
-  <Box css={{width:"100%"}}>
+<Box css={{width:"100%"}}>
 
 ### User-Centered Functionality
 
 - **User Needs:** Prioritize user needs and ensure that every design component serves a clear, user-oriented function.
 - **Performance:** Ensure components are optimized for performance, minimizing load times and ensuring smooth interactions.
 - **Reliability:** Design components should consistently perform their intended function across all use cases and user flows.
 
-  </Box>
-<Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
+</Box>
+
+  <Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
   <InlineImage
       width={400}
       height={240}
@@ -66,16 +69,17 @@ description: In our pursuit to create a seamless, user-friendly, and visually co
 ## 3. Adaptable
 
 <Box css={{display:"flex",alignItems:"start",flexDirection:"row", gap:"$150","@media (max-width: 600px)":{flexDirection:"column-reverse"}}}>
-  <Box css={{width:"100%"}}>
+<Box css={{width:"100%"}}>
 
 ### Responsive and Scalable Design
 
 - **Responsiveness:** Ensure components are designed to provide an optimal user experience across all screen sizes and orientations.
 - **Scalability:** Design components should be able to handle variations in content and functionality without compromising user experience or aesthetic appeal.
 - **Globalization:** Consider localization and internationalization to ensure the design system is adaptable to different languages and cultures.
 
-  </Box>
-<Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
+</Box>
+
+  <Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
   <InlineImage
       width={400}
       height={240}
@@ -90,16 +94,17 @@ description: In our pursuit to create a seamless, user-friendly, and visually co
 ## 4. Predictable
 
 <Box css={{display:"flex",alignItems:"start",flexDirection:"row", gap:"$150","@media (max-width: 600px)":{flexDirection:"column-reverse"}}}>
-  <Box css={{width:"100%"}}>
+<Box css={{width:"100%"}}>
 
 ### Intuitive and Predictable Interactions
 
 - **Consistency:** Maintain consistent design patterns and interactions across all components and layouts to reduce the user's cognitive load.
 - **Feedback:** Provide clear and immediate feedback in response to user actions to confirm outcomes and guide next steps.
 - **Guidance:** Implement clear, intuitive wayfinding and familiar ui so users understand and can predict how a component behaves/functions when they see it on our product.
 
-  </Box>
-<Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
+</Box>
+
+  <Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
   <InlineImage
       width={400}
       height={240}
@@ -114,16 +119,17 @@ description: In our pursuit to create a seamless, user-friendly, and visually co
 ## 5. Accessible
 
 <Box css={{display:"flex",alignItems:"start",flexDirection:"row", gap:"$150","@media (max-width: 600px)":{flexDirection:"column-reverse"}}}>
-  <Box css={{width:"100%"}}>
+<Box css={{width:"100%"}}>
 
 ### Inclusive and Accessible Design
 
 - **Universal Design:** Ensure that all components are designed to be usable by as many people as possible, including those with disabilities.
 - **Compliance:** Adhere to WCAG (Web Content Accessibility Guidelines) to ensure that digital content is accessible to all users, including those with disabilities.
 - **Inclusive Imagery and Language:** Utilize imagery and language that reflect diversity and inclusivity, ensuring that all users feel represented and welcomed.
 
-  </Box>
-<Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
+</Box>
+
+  <Box css={{display:"flex",justifyContent:"center",width:"100%"}}>
   <InlineImage
       width={400}
       height={240}