fix: heading overlap and image overflow on DAU product page in mobile view(#270)

* Fix: Heading overlap on phone by using Grommet's Heading with level=2

* Fix image overflow on mobile by making the image wrapper responsive with maxWidth and width properties.

* Updated dau.mdx

Author: Preetiaarya

src/pages/products/dau.mdx

@@ -8,12 +8,14 @@ import { Anchor, Text, Box } from "grommet"
 import { PlainLink } from "../../components/atomic/TattleLinks"
 import { LatestProductBlogsUpdates } from "../../components/LatestProductBlogsUpdates"
 
-# Deepfakes Analysis Unit
+import { Heading } from 'grommet'
+
+<Heading level={2}>Deepfakes Analysis Unit</Heading>
 
 <div style={{textAlign:"center"}}>
-    <div style={{width:"750px"}}>
+    <div style={{ maxWidth: "750px", width: "100%",}}>
     ![Example Image](../../images/products/dau-illustration.jpg)
-    </div>
+    </div>    
 </div>