diff --git a/packages/roleypoly-ui/kit/media.js b/packages/roleypoly-ui/kit/media.js
index f4b8e97..c3912ad 100644
--- a/packages/roleypoly-ui/kit/media.js
+++ b/packages/roleypoly-ui/kit/media.js
@@ -17,7 +17,7 @@ export const breakpoints = {
   xl: 1280
 }
 
-const mediaTemplateLiteral = (size: number, ...stuff: any): string =>
+const mediaTemplateLiteral = (size: number, ...stuff: mixed[]): string =>
   `@media screen and (min-width: ${size}px) {\n${stuff.join()}\n};`
 
 export const xs = mediaTemplateLiteral.bind(null, breakpoints.xs)
diff --git a/packages/roleypoly-ui/pages/auth/login.js b/packages/roleypoly-ui/pages/auth/login.js
index 0909166..d585ca5 100644
--- a/packages/roleypoly-ui/pages/auth/login.js
+++ b/packages/roleypoly-ui/pages/auth/login.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
 import styled from 'styled-components'
-import MediaQuery from '../../kit/media'
+import { md } from '../../kit/media'
 import DiscordButton from '../../components/discord-button'
 import RPC from '../../config/rpc'
 import redirect from '../../lib/redirect'
@@ -29,13 +29,11 @@ const Wrapper = styled.div`
   max-width: calc(98vw - 10px);
   margin: 0 auto;
   text-align: center;
-  ${() => MediaQuery({
-    md: `
-      padding-top: 0;
-      align-items: center;
-      min-height: 80vh;
-    `
-  })}
+  ${md`
+    padding-top: 0;
+    align-items: center;
+    min-height: 80vh;
+  `}
 `
 
 const Line = styled.div`