🎨 added small tweaks

Author: BorghildSelle

web/components/src/Fact/Content.tsx

@@ -21,7 +21,7 @@ export const Content = ({
   ...rest
 }: ContentProps) => {
   const contentClassNames = `
-  ${!hasColumns && !hasImage ? 'px-layout-lg' : ''}
+  ${!hasColumns && !hasImage ? 'px-layout-lg max-w-viewport mx-auto' : ''}
   ${hasColumns && !hasImage ? 'px-layout-sm' : ''}
   ${
     hasImage

web/pageComponents/shared/portableText/components/news/Fact.tsx

@@ -1,12 +1,12 @@
 import { toPlainText } from '@portabletext/react'
-import Img from 'next/image'
 import { FactBox } from '@components'
 import type { FactImagePosition } from '@components'
 import type { PortableTextBlock } from '@portabletext/types'
 import type { BackgroundColours, ImageWithAlt } from '../../../../../types/types'
 import { urlFor } from '../../../../../common/helpers'
 import Blocks from '../../Blocks'
 import { Typography } from '@core/Typography'
+import Image from '../../../SanityImage'
 
 type FactboxProps = {
   title: string
@@ -51,7 +51,7 @@ export const Fact = (block: BlockProps) => {
     >
       {imageSrc && (
         <FactBox.Image imagePosition={imagePosition}>
-          <Img src={imageSrc} alt={image.alt ? image.alt : 'FactBox'} style={{ objectFit: 'cover' }} fill />
+          <Image image={image} fill />
         </FactBox.Image>
       )}
 
@@ -67,7 +67,7 @@ export const Fact = (block: BlockProps) => {
             {title}
           </Typography>
         )}
-        <FactBox.Text hasColumns={hasColumns}>
+        <FactBox.Text>
           <Blocks
             value={content}
             className={`prose ${hasColumns ? 'max-w-none lg:columns-2 lg:[column-gap:theme(spacing.24)]' : ''}`}