Remove max-widths, use theme breakpoints module for consistency

src/components/Header.tsx

@@ -2,14 +2,15 @@ import React, { useState, useEffect, useRef } from "react";
 import Navigation from "./Navigation";
 import throttle from "lodash/throttle";
 import styled from "styled-components";
-import { colors } from "@theme/colors";
+import colors from "@theme/colors";
+import breakpoints from "@theme/breakpoints";
 import NavigationMobile from "./NavigationMobile";
 import HeaderLogo from "./HeaderLogo";
 
 const StyledHeader = styled.header<{isHidden?: boolean}>`
   display: flex;
   flex-flow: row nowrap;
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: ${breakpoints.mobile}) {
     flex-flow: column nowrap;
   }
 `;