From 9aeb2a7dbacab067a314ddedbe176cc8d0f272d6 Mon Sep 17 00:00:00 2001
From: Liam Neville <lineville@github.com>
Date: Tue, 3 Dec 2024 13:34:22 -0500
Subject: [PATCH] refactor next image

---
 src/components/Board.tsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/Board.tsx b/src/components/Board.tsx
index c29c6ea..2b0ecb2 100644
--- a/src/components/Board.tsx
+++ b/src/components/Board.tsx
@@ -31,7 +31,7 @@ export default function Board({
   const { colorMode } = useColorMode();
 
   return (
-    <Grid
+    (<Grid
       templateColumns={`repeat(${columns}, 1fr)`}
       gap={3}
       rowGap={3}
@@ -60,22 +60,28 @@ export default function Board({
                       alt={c.name}
                       placeholder="empty"
                       priority={true}
-                      sizes="(max-width: 768px) 100px, 130px"
                       width={100}
                       height={100}
-                      objectFit="cover"
-                    />
+                      sizes="(max-width: 768px) 100px, 130px"
+                      style={{
+                        maxWidth: "100%",
+                        height: "auto",
+                        objectFit: "cover"
+                      }} />
 
                     <Image
                       src="/question-mark.png"
                       alt="question mark"
                       placeholder="empty"
                       priority={true}
-                      sizes="(max-width: 768px) 100px, 130px"
                       width={100}
                       height={100}
-                      objectFit="cover"
-                    />
+                      sizes="(max-width: 768px) 100px, 130px"
+                      style={{
+                        maxWidth: "100%",
+                        height: "auto",
+                        objectFit: "cover"
+                      }} />
                   </FlipCard>
                 </CardBody>
                 <CardFooter
@@ -102,6 +108,6 @@ export default function Board({
           </SlideFade>
         </GridItem>
       ))}
-    </Grid>
+    </Grid>)
   );
 }