Fix broken hover state on mobile

pages/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Container, Heading, Link, SimpleGrid, Text } from '@chakra-ui/react';
+import { Box, Container, Heading, Link, SimpleGrid, Text, useMediaQuery } from '@chakra-ui/react';
 import { GlobalHeader } from '../components/global-header';
 import { Footer } from '../components/footer';
 import { UpdatesBanner } from '../components/updates-banner';
@@ -53,6 +53,16 @@ export default function Home(props: HomeProps) {
           <SimpleGrid
             columns={[1, 2, 3]}
             spacing={['10px', '10px', '15px']}
+            sx={{
+              // Don't change the opacity on mobile devices
+              '@media (hover: none)': {
+                '&:hover': {
+                  '.home-roadmap-item': {
+                    opacity: 1
+                  }
+                }
+              }
+            }}
             _hover={{ '& .home-roadmap-item': { opacity: '0.5'} }}
           >
             {roadmaps.map((roadmap: RoadmapType, counter: number) => (