Make hackathons page responsive

ty matthew

components/hackathons/features/money.js

@@ -83,8 +83,12 @@ const Content = () => (
         />
       </List>
       <NextLink href="/bank" passHref>
-        <Button as="a" variant="outlineLg" sx={{ width: 500 }}>
-          Apply for Hack Club Bank →
+        <Button as="a" variant="outlineLg" sx={{ width: [null, null, 500] }}>
+          Apply&nbsp;
+          <Box as="span" sx={{ display: ['none', 'inline', ''] }}>
+            for Hack Club Bank
+          </Box>{' '}
+          →
         </Button>
       </NextLink>
     </Container>
@@ -117,12 +121,21 @@ const ListItem = ({ icon, leadText, body, knew }) => (
         }}
       />
       <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-        <Flex sx={{ alignItems: 'center' }}>
-          <Text sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}>
+        <Box
+          sx={{
+            display: [null, null, 'flex'],
+            alignItems: 'center'
+          }}
+        >
+          <Text
+            as="span"
+            sx={{ fontWeight: 'bold', fontSize: [24, 32], lineHeight: 1 }}
+          >
             {leadText}
           </Text>
           {knew && (
             <Badge
+              as="span"
               variant="pill"
               sx={{
                 zIndex: '1',
@@ -135,7 +148,7 @@ const ListItem = ({ icon, leadText, body, knew }) => (
               New!
             </Badge>
           )}
-        </Flex>
+        </Box>
 
         <Text variant="lead">{body}</Text>
       </Box>

components/hackathons/keep-exploring.js

@@ -27,7 +27,12 @@ export default function KeepExploring() {
             alignContent: 'center'
           }}
         >
-          Keep exploring <Icon glyph="explore" size={70} />
+          Keep exploring{' '}
+          <Icon
+            glyph="explore"
+            size={70}
+            sx={{ display: ['none', null, null] }}
+          />
         </Heading>
         <Link href="/slack" passHref>
           <Button

components/hackathons/landing.js

@@ -52,7 +52,8 @@ export default function Landing() {
                       'translateY(-50%) rotate(8deg)',
                       'translateX(15%) rotate(12deg)'
                     ],
-                    fontSize: [2, 3]
+                    fontSize: [2, 3],
+                    display: ['none', null, null]
                   }}
                 >
                   Looking for hackathons?{' '}