import React from 'react';
import Section from '~/components/section';
import styled from 'styled-components';
import Typography from '~/components/typography';
import PageSection from "~/components/page-section";
import CalloutButton from './button';

const CalloutSection = ({className}) => (<PageSection className={className} bg="dark" py={128} >
        <Typography component="h1" color="#FFF" size={1.5}>Want to find out more?</Typography>
        <Typography component="h2" color="#FFF" size={1}>Subheading</Typography>
        <CalloutButton href="contact">Contact Us</CalloutButton>
</PageSection>);

export default styled(CalloutSection)`
    text-align:center;
`;

@@ -395,17 +395,23 @@
 FF%22 
-size=%7B1.5
+f=%7B%5B4, 6, 8, 8%5D
 %7D%3EWa
@@ -496,15 +496,23 @@
 FF%22 
-size=%7B1
+f=%7B%5B2, 4, 6, 6%5D
 %7D%3ESu

make the callout text resize by breakpoints