Fixed responsive styles for docs home: shortcut links

packages/website/ts/components/docs/shortcut_link.tsx

@@ -16,7 +16,7 @@ export interface IShortcutLinkProps {
 
 export const ShortcutLink: React.FC<IShortcutLinkProps> = props => (
     <ShortcutLinkWrapper isHome={props.isHome} href={props.url}>
-        <Icon color={colors.brandLight} name={props.icon} size={80} margin={[0, 40, 0, 0]} />
+        <ShortcutIcon color={colors.brandLight} name={props.icon} />
         <div>
             <Heading size="small" marginBottom="8px">
                 {props.heading}
@@ -32,10 +32,26 @@ ShortcutLink.defaultProps = {
     isHome: false,
 };
 
+const ShortcutIcon = styled(Icon)`
+    margin-bottom: 1rem;
+
+    @media (min-width: 900px) {
+        margin-right: 40px;
+        margin-bottom: 0;
+    }
+`;
+
 const ShortcutLinkWrapper = styled.a<{ isHome: boolean }>`
     background-color: ${colors.backgroundLight};
     border: 1px solid #dbdfdd;
     padding: 50px;
     display: flex;
     align-items: center;
+    flex-direction: column;
+    text-align: center;
+
+    @media (min-width: 900px) {
+        flex-direction: row;
+        text-align: left;
+    }
 `;

packages/website/ts/pages/docs/home.tsx

@@ -62,6 +62,10 @@ const ShortcutsWrapper = styled.div`
     grid-template-columns: 1fr 1fr;
     grid-column-gap: 30px;
     grid-row-gap: 30px;
+
+    @media (max-width: 500px) {
+        grid-template-columns: 1fr;
+    }
 `;
 
 const CommunityWrapper = styled.div`