fix producthunt image size

src/components/Producthunt/index.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import styled from "styled-components";
 
 const StyledImage = styled.img`
-  object-fit: contain;
   max-width: 300px;
+  display: block;
 
   @media only screen and (max-width: 768px) {
     width: 200px;
@@ -11,20 +11,24 @@ const StyledImage = styled.img`
   }
 `;
 
+const StyledProducthuntWrapper = styled.span``;
+
 export const Producthunt = () => {
   return (
-    <a
-      href="https://www.producthunt.com/posts/json-visio?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-json-visio"
-      target="_blank"
-      rel="noreferrer"
-    >
-      <StyledImage
-        width="500"
-        height="200"
-        src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=332281&theme=neutral"
-        alt="JSON Visio - Simple visualization tool for your JSON data. | Product Hunt"
-        loading="lazy"
-      />
-    </a>
+    <StyledProducthuntWrapper>
+      <a
+        href="https://www.producthunt.com/posts/json-visio?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-json-visio"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <StyledImage
+          width="300"
+          height="64"
+          src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=332281&theme=neutral"
+          alt="JSON Visio - Simple visualization tool for your JSON data. | Product Hunt"
+          loading="lazy"
+        />
+      </a>
+    </StyledProducthuntWrapper>
   );
 };