docs: update browser compat

Author: adarshpastakia

assets/chrome.png renamed to assets/browser/chrome.png

@@ -43,7 +43,7 @@ import {
   Title,
   Video,
 } from "../../../src";
-import video from "/assets/small_video.mp4";
+import video from "/assets/samples/small_video.mp4";
 
 const meta: Meta = {
   component: Card,

assets/browser/edge.png

@@ -43,9 +43,23 @@ import { Translation } from "react-i18next";
 [![prettier](https://img.shields.io/badge/prettier-EA4C89.svg?style=flat-square&labelColor=333&logo=prettier)](https://prettier.io/)
 [![codeclimate](https://img.shields.io/badge/code%20climate-272425.svg?style=flat-square&labelColor=333&logo=code%20climate)](http://codeclimate.com/)
 
-<div className="inline-flex gap-2 flex-nowrap items-center rounded py-1 px-2 outline">
-  <img src="chrome.png" className="h-8" />
-  <span className="text-lg">≥ 121</span>
+<div className="inline-flex gap-2 flex-nowrap items-center rounded outline leading-none overflow-hidden">
+  <img src="browser/chrome.png" className="h-6 p-1 bg-dark" />
+  <span className="text-lg leading-none pe-2 font-medium font-mono">≥ 117</span>
+</div>
+<div className="inline-flex gap-2 flex-nowrap items-center rounded outline">
+  <img src="browser/firefox.png" className="h-6 p-1 bg-dark" />
+  <span className="text-lg leading-none pe-2 font-medium font-mono">≥ 117</span>
+</div>
+<div className="inline-flex gap-2 flex-nowrap items-center rounded outline">
+  <img src="browser/edge.png" className="h-6 p-1 bg-dark" />
+  <span className="text-lg leading-none pe-2 font-medium font-mono">≥ 117</span>
+</div>
+<div className="inline-flex gap-2 flex-nowrap items-center rounded outline">
+  <img src="browser/safari.png" className="h-6 p-1 bg-dark" />
+  <span className="text-lg leading-none pe-2 font-medium font-mono">
+    <span>≥ 16.2</span>
+  </span>
 </div>
 
 <hr />