import styled from 'styled-components';

import constants from 'react/styles/constants';
import Text from 'react/components/UI/Text';
import { GenericButtonLink } from 'react/components/UI/GenericButton';

const Copy = styled(Text).attrs({
  f: 5,
  py: 3,
  pr: 4,
})``;

const Button = styled(GenericButtonLink).attrs({
  mx: 3,
})`
  ${constants.media.mobile`
    padding-left: 0.5em;
    padding-right: 0.5em;
  `}

`;

const Container = styled.div`
  display: flex;
  align-content: center;
  justify-content: center;
`;

export { Copy, Button, Container };

@@ -328,97 +328,45 @@
  3,%0A
-%7D)%60%0A  $%7Bconstants.media.mobile%60%0A    padding-left: 0.5em;%0A    padding-right: 0.5em;%0A  %60%7D%0A%0A
+  px: %5B1, 3, 8%5D,%0A  mb: %5B4, 0, 0%5D,%0A%7D)%60
 %60;%0A%0A
@@ -464,16 +464,80 @@
 center;%0A
+  %0A  $%7Bconstants.media.mobile%60%0A    flex-direction: column;%0A  %60%7D%0A
 %60;%0A%0Aexpo

Fix responsive styling for LoggedOutCTA