//@flow

import styled, { css } from "styled-components";

export const Title = styled.h1`

  ${({ theme }: { theme: Theme }) => css`
  
    ${theme.type.title};
    font-size: ${theme.scale.s3(2)};
    color: ${theme.color.black};
    z-index: 1;

    display: inline-block;
    text-align: center;
    line-height: 1;
    margin: 0;
    cursor: pointer;

  `}
`;

//@flow

import styled, { css } from "styled-components";

export const Title = styled.h1`

  ${({ theme }: { theme: Theme }) => css`
  
    ${theme.type.title};
    font-size: ${theme.scale.s8()};
    color: ${theme.color.black};

    display: inline-block;
    text-align: center;
    line-height: 1;
    margin: 0;
    cursor: pointer;

  `}
`;

--- 
+++ 
@@ -7,8 +7,9 @@
   ${({ theme }: { theme: Theme }) => css`
   
     ${theme.type.title};
-    font-size: ${theme.scale.s8()};
+    font-size: ${theme.scale.s3(2)};
     color: ${theme.color.black};
+    z-index: 1;
 
     display: inline-block;
     text-align: center;
Adjust font-size of title and create new stacking context for Highlight

