Fix top index image

src/pages/index.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource theme-ui */
 import { Box, Text } from '@theme-ui/components'
 import PageLink from '../components/atoms/PageLink'
-import SquareImageBox from '../components/atoms/SquareImageBox'
+import Image from 'next/image'
 import RootNavigator from '../components/organisms/RootNavigator'
 
 const IndexPage = () => {
@@ -11,8 +11,16 @@ const IndexPage = () => {
       <Box sx={{ p: 3 }}>
         <Box mb={4}>
           <PageLink href='/honkai3rd'>
+            <Box sx={{ position: 'relative' }}>
+              <Image
+                alt='Honkai 3rd Wallpaper'
+                src='/assets/honkai3rd/wallpaper.png'
+                width={640}
+                height={360}
+                layout='responsive'
+              />
+            </Box>
             <Text sx={{ fontSize: 3 }}>Honkai 3rd</Text>
-            <SquareImageBox size={280} src='/assets/honkai3rd/banner.png' />
           </PageLink>
         </Box>
         <Box mb={4}>