{"version":3,"sources":["webpack:///./src/components/HeroSectionExtraHeading.js","webpack:///./src/components/ContentAnimation.js","webpack:///./src/components/ContentSnippet.js","webpack:///./src/components/HorizontalPhonesAnimation.js","webpack:///./src/images/12-yellow-guides.png","webpack:///./src/components/HeroBlueCTA.js","webpack:///./src/components/HeroSection.js","webpack:///./src/components/AnimationWrapper.js"],"names":["Wrapper","styled","div","props","theme","backgroundColor","brandColor2","paddingMedia","marginMedia","mediaMedium","paddingDesktop","marginDesktop","Grid","reverse","Div","imageRight","imageLeft","imageTop","imageBottom","width","height","Overflow","Image","Display","imageMarginMedia","Content","Disclaimer","Body20","Row","titleMarginMedia","titleMarginDesktop","titleWidth","HeroSectionExtraHeading","animation","alt","title","top","children","heading","headingDisclaimer","images","outline","contentWrapper","AnimationComponent","color","white","fill","component","as","src","mobile","undefined","threshold","desktop","Container","mediaTablet","Top","Bottom","Animation","active","css","FlyBy","Trigger","Threshold","ContentAnimation","ref","inView","useInView","delay","triggerOnce","fluid","contentOne","childImageSharp","contentTwo","span","SmallTitle","Headline40","small","ContentSnippet","Title","Headline64","black1","margins","stroke","ContainerRelative","left","BoxPosition","mediaWidth","positionMargin","maxHeight","positionSmall","positionMedium","positionLarge","displayMarginTop","Left","leftMediaWidth","leftMediaTransform","cardStyles","leftWidth","leftTop","leftTransform","cardDesktopStyles","Middle","middleWidth","middleTop","middleTransform","Right","rightMediaTop","rightMediaWidth","rightMediaTransform","rightWidth","rightTop","rightTransform","SlideInRight","SlideInLeft","mediaDelay","HorizontalPhonesAnimation","forceActive","activeAnimation","one","maxWidth","two","three","module","exports","Box","imageDecoration","Background","HeroBlueCTA","description","link","linkLabel","dangerouslySetInnerHTML","__html","attrs","overflow","backgroundImage","marginTop","wrapperStyles","noGrid","divWidth","overflowWidth","imgWidth","imgTransform","contentMarginBottom","Space","HeroSection","noTextContent","decoration","displayComponent","Element","AnimationWrapper"],"mappings":"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","file":"2250b53de61967a6264ef34daecfaae1ed32318b-f47aa5a034b499b21070.js","sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport ContentSnippet from \"./ContentSnippet\";\nimport Container from \"./styles/Container\";\nimport { mediaMedium } from \"./styles/variables\";\nimport Image from \"./Image\";\nimport { brandColor2, white } from \"./styles/Colors\";\nimport { Headline80 } from \"./styles/Headings\";\nimport OutlinedText from \"./styles/OutlinedText\";\nimport AnimationWrapper from \"./AnimationWrapper\";\nimport {Body20} from \"./styles/BodyTypes\";\n\nconst Wrapper = styled.div`\n  overflow: hidden;\n  position: relative;\n  background-color: ${(props) => props.theme.backgroundColor ?? brandColor2};\n  padding: ${(props) =>\n    props.theme.paddingMedia ? props.theme.paddingMedia : \"96px 0 0\"};\n  margin: ${(props) =>\n    props.theme.marginMedia ? props.theme.marginMedia : \"0\"};\n\n  @media (${mediaMedium}) {\n    padding: ${(props) =>\n      props.theme.paddingDesktop\n        ? props.theme.paddingDesktop\n        : \"144px 0 127px\"};\n    margin: ${(props) =>\n      props.theme.marginDesktop ? props.theme.marginDesktop : \"0 auto\"};\n  }\n`;\n\nconst Grid = styled.div`\n  @media (${mediaMedium}) {\n    display: grid;\n    width: 100%;\n    grid-template-columns: calc(100% * 5 / 12);\n    justify-content: ${(props) => (props.reverse ? \"end\" : \"start\")};\n  }\n`;\n\nconst Div = styled.div`\n  position: absolute;\n\n  @media (${mediaMedium}) {\n    right: ${(props) =>\n      props.theme.imageRight ? props.theme.imageRight : \"initial\"};\n    left: ${(props) =>\n      props.theme.imageLeft ? props.theme.imageLeft : \"calc(100% * 4.4/12)\"};\n    top: ${(props) => (props.theme.imageTop ? props.theme.imageTop : \"0px\")};\n    bottom: ${(props) =>\n      props.theme.imageBottom ? props.theme.imageBottom : \"initial\"};\n    width: ${(props) => (props.width ? `${props.width}px` : \"auto\")};\n    height: ${(props) => (props.height ? `${props.height}px` : \"auto\")};\n  }\n`;\n\nconst Overflow = styled(Image)`\n  display: none;\n  pointer-events: none;\n\n  @media (${mediaMedium}) {\n    display: block;\n    right: ${(props) =>\n      props.theme.imageRight ? props.theme.imageRight : \"initial\"};\n    left: ${(props) =>\n      props.theme.imageLeft ? props.theme.imageLeft : \"calc(100% * 4.4/12)\"};\n    top: ${(props) => (props.theme.imageTop ? props.theme.imageTop : \"0px\")};\n    bottom: ${(props) =>\n      props.theme.imageBottom ? props.theme.imageBottom : \"initial\"};\n    width: ${(props) => (props.width ? `${props.width}px` : \"auto\")};\n    height: ${(props) => (props.height ? `${props.height}px` : \"auto\")};\n    max-width: none;\n  }\n`;\n\nconst Display = styled(Image)`\n  width: calc(100% + 40px);\n  max-width: calc(100% + 40px);\n  transform: translateX(-20px);\n  margin: ${(props) => props.theme.imageMarginMedia ?? \"0\"};\n  pointer-events: none;\n\n  @media (${mediaMedium}) {\n    display: none;\n  }\n`;\n\nconst Content = styled.div`\n  margin-bottom: 85px;\n\n  @media (${mediaMedium}) {\n    margin-bottom: 0;\n  }\n`;\n\nconst Disclaimer = styled(Body20)`\n  margin: 30px 0;\n`;\n\nconst Row = styled.div`\n  margin-bottom: ${(props) => props.theme.titleMarginMedia ?? \"86px\"};\n\n  @media (${mediaMedium}) {\n    margin-bottom: ${(props) => props.theme.titleMarginDesktop ?? \"166px\"};\n    width: ${(props) => props.theme.titleWidth ?? \"auto\"};\n  }\n`;\n\nconst HeroSectionExtraHeading = ({\n  animation,\n  alt,\n  title,\n  top,\n  children,\n  heading,\n  headingDisclaimer,\n  images,\n  theme,\n  reverse,\n  outline,\n  contentWrapper,\n  AnimationComponent\n}) => {\n  return (\n    <Wrapper theme={theme}>\n      <Container>\n        <Grid reverse={reverse}>\n          <Content>\n            <Row theme={theme}>\n              <Headline80 theme={{ color: alt ? null : white }}>\n                {heading}{\" \"}\n                {outline && (\n                  <OutlinedText fill=\"transparent\" component=\"span\" as=\"span\">\n                    <br />\n                    {outline}\n                  </OutlinedText>\n                )}\n              </Headline80>\n              {headingDisclaimer && (\n                <Disclaimer>{headingDisclaimer}</Disclaimer>\n              )}\n            </Row>\n\n            <ContentSnippet\n              contentWrapper={contentWrapper}\n              fill={brandColor2}\n              color={!alt}\n              title={title}\n              top={top}\n            >\n              {children}\n            </ContentSnippet>\n          </Content>\n\n          {!AnimationComponent && !animation && (\n            <div>\n              <Display\n                theme={theme}\n                src={images ? images.mobile.src : undefined}\n                width={images ? images.mobile.width : undefined}\n                height={images ? images.mobile.height : undefined}\n                alt={title}\n              />\n            </div>\n          )}\n\n          {!AnimationComponent && animation && (\n            <AnimationWrapper\n              component={animation}\n              threshold={[0.2, 0.3, 0.5, 0.75]}\n            >\n              <Display\n                theme={theme}\n                src={images ? images.mobile.src : undefined}\n                width={images ? images.mobile.width : undefined}\n                height={images ? images.mobile.height : undefined}\n                alt={title}\n              />\n            </AnimationWrapper>\n          )}\n        </Grid>\n      </Container>\n\n      {!AnimationComponent && !animation && (\n        <Div theme={theme}>\n          <Overflow\n            theme={theme}\n            src={images ? images.desktop.src : undefined}\n            width={images ? images.desktop.width : undefined}\n            height={images ? images.desktop.height : undefined}\n            alt={title}\n          />\n        </Div>\n      )}\n\n      {!AnimationComponent && animation && (\n        <Div theme={theme}>\n          <AnimationWrapper\n            threshold={[0.2, 0.3, 0.5, 0.75]}\n            component={animation}\n          >\n            <Overflow\n              theme={theme}\n              src={images ? images.desktop.src : undefined}\n              width={images ? images.desktop.width : undefined}\n              height={images ? images.desktop.height : undefined}\n              alt={title}\n            />\n          </AnimationWrapper>\n        </Div>\n      )}\n\n      {AnimationComponent && <AnimationComponent />}\n    </Wrapper>\n  );\n};\n\nexport default HeroSectionExtraHeading;\n","import React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { mediaMedium, mediaTablet } from \"./styles/variables\";\nimport Image from \"./Image\";\nimport { FlyBy } from \"./styles/animations\";\nimport { useInView } from \"react-intersection-observer\";\n\nconst Container = styled.div`\n  pointer-events: none;\n  max-width: 150%;\n  width: 150%;\n  padding-top: 24px;\n  max-height: 300px;\n  transform: translateX(-25%);\n  position: relative;\n\n  @media (${mediaTablet}) {\n    max-height: 480px;\n    max-width: 100%;\n    width: 100%;\n    transform: none;\n  }\n\n  @media (${mediaMedium}) {\n    max-width: 700px;\n    width: 53vw;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    margin: 0 auto;\n    overflow: visible;\n    transform: none;\n  }\n\n  @media (min-width: 1140px) {\n    left: 8%;\n  }\n\n  @media (min-width: 2040px) {\n    left: 22%;\n  }\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  padding-top: 120.6%;\n`;\n\nconst Top = styled.div`\n  position: absolute;\n  top: -10%;\n  z-index: 2;\n  width: 80%;\n  transform: translateX(-10%);\n\n  @media (${mediaMedium}) {\n    width: 100%;\n    left: 0;\n    transform: translateX(-40%);\n  }\n`;\n\nconst Bottom = styled(Top)`\n  z-index: 3;\n  top: 15%;\n  left: 0;\n  transform: translateX(24%);\n\n  @media (${mediaMedium}) {\n    z-index: 5;\n    top: 25%;\n    transform: translateX(-8%);\n  }\n`;\n\nconst Animation = styled(Image)`\n  transform: translateY(20%) translateX(-20%);\n  animation: ${(props) =>\n    props.active\n      ? css`\n          ${FlyBy} 0.9s ease forwards 0.1s\n        `\n      : \"none\"};\n`;\n\nconst Trigger = styled.div`\n  position: absolute;\n  width: 100%;\n  height: 100vw;\n  top: 0;\n  transform: translateY(-30%);\n  left: 0;\n  pointer-events: none;\n\n  @media (${mediaMedium}) {\n    height: 50vw;\n    transform: translateY(0);\n  }\n`;\n\nconst Threshold = [0, 0.3, 0.5, 0.7, 1];\n\nconst ContentAnimation = ({ images }) => {\n  const { ref, inView } = useInView({\n    threshold: Threshold,\n    delay: 30,\n    triggerOnce: true\n  });\n\n  return (\n    <Container>\n      <Trigger ref={ref} />\n      <Wrapper>\n        <Top>\n          <Animation\n            fluid={images.contentOne.childImageSharp.fluid}\n            active={inView}\n          />\n        </Top>\n\n        <Bottom>\n          <Animation\n            fluid={images.contentTwo.childImageSharp.fluid}\n            active={inView}\n          />\n        </Bottom>\n      </Wrapper>\n    </Container>\n  );\n};\n\nexport default ContentAnimation;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport OutlinedText from \"./styles/OutlinedText\";\nimport { Headline64, Headline40 } from \"./styles/Headings\";\nimport { Body20 } from \"./styles/BodyTypes\";\nimport { black1, white } from \"./styles/Colors\";\nimport { mediaMedium } from \"./styles/variables\";\n\nconst Row = styled.span`\n  display: block;\n`;\n\nconst SmallTitle = styled(Headline40)`\n  margin: 0;\n`;\n\nconst Content = styled(Body20)`\n  margin: ${(props) => (props.small ? \"16px 0 22px\" : \"28px 0\")};\n\n  @media (${mediaMedium}) {\n    margin: 20px 0;\n  }\n`;\n\nconst ContentSnippet = ({\n  title,\n  top,\n  children,\n  color,\n  small,\n  contentWrapper\n}) => {\n  const Title = small ? Headline40 : Headline64;\n  return (\n    <>\n      <Title theme={{ color: color ? white : black1, margins: \"0\" }}>\n        <OutlinedText\n          color={color ? white : black1}\n          stroke={color ? white : black1}\n          fill=\"transparent\"\n          component={small ? SmallTitle : Headline64}\n          as=\"span\"\n        >\n          {top}\n        </OutlinedText>\n        <Row>{title}</Row>\n      </Title>\n      <Content\n        small={small}\n        as={contentWrapper ?? \"p\"}\n        theme={{ color: color ? white : black1 }}\n      >\n        {children}\n      </Content>\n    </>\n  );\n};\n\nexport default ContentSnippet;\n","import React from \"react\";\nimport styled, { css, ThemeProvider } from \"styled-components\";\nimport { mediaMedium } from \"./styles/variables\";\nimport Image from \"./Image\";\nimport { SlideInLeft, SlideInRight } from \"./styles/animations\";\nimport { useInView } from \"react-intersection-observer\";\nimport Container from \"./styles/Container\";\n\nconst ContainerRelative = styled(Container)`\n  position: relative;\n  backface-visibility: hidden;\n  ${(props) => (props.theme.left ? `width: 100%;` : ``)};\n\n  @media (max-width: 830px) {\n    margin-top: -36px;\n  };\n`;\n\nconst BoxPosition = styled.div`\n  //pointer-events: none;\n  max-width: 100%;\n  width: ${(props) =>\n    props.theme.mediaWidth ? props.theme.mediaWidth : `980px`};\n  margin: ${(props) => (props.theme.left ? `0 0 0 auto` : `0 auto`)};\n  ${(props) => (props.theme.left ? `right: 0;` : `left: 0;`)};\n  ${(props) => (props.theme.positionMargin && `margin: ${props.theme.positionMargin};`)};\n\n  @media (${mediaMedium}) {\n    max-height: ${(props) =>\n      props.theme.maxHeight ? props.theme.maxHeight : `700px`};\n    width: ${(props) => (props.theme.width ? props.theme.width : `1090px`)};\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    transform: ${(props) =>\n      props.theme.positionSmall\n        ? props.theme.positionSmall\n        : `translateX(-65%) translateY(-50vw)`};\n  };\n\n  @media (min-width: 980px) {\n    transform: ${(props) =>\n      props.theme.positionMedium\n        ? props.theme.positionMedium\n        : `translateX(-48%) translateY(-72%)`};\n  };\n\n  @media (min-width: 1080px) {\n    transform: ${(props) =>\n      props.theme.positionLarge\n        ? props.theme.positionLarge\n        : `translateX(-48%) translateY(-71%)`};\n  }\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  ${(props)=>props.theme?.displayMarginTop && props.theme?.displayMarginTop}\n\n  @media (${mediaMedium}) {\n    display: block;\n    padding-top: 59.3%;\n  }\n`;\n\nconst Left = styled.div`\n  width: ${(props) =>\n          props.theme.leftMediaWidth ? props.theme.leftMediaWidth : `220%`};\n  left: 0;\n  top: 1.4%;\n  transform: translateX(\n    ${(props) =>\n      props.theme.leftMediaTransform ? props.theme.leftMediaTransform : `-38%`}\n  );\n  ${(props) => props.theme.cardStyles && props.theme.cardStyles}\n\n  @media (${mediaMedium}) {\n    max-width: ${(props) => props.width}px;\n    position: absolute;\n    width: ${(props) =>\n            props.theme.leftWidth ? props.theme.leftWidth : `90%`};\n    z-index: 1;\n    ${(props) => (props.theme.leftTop ? `top: ${props.theme.leftTop};` : ``)}\n    transform: ${(props) =>\n      props.theme.leftTransform\n        ? `translateX(${props.theme.leftTransform})`\n        : `none`};\n    ${(props) => props.theme.cardDesktopStyles && props.theme.cardDesktopStyles}\n  }\n`;\n\nconst Middle = styled(Left)`\n  position: absolute;\n  display: none;\n  top: 2.8%;\n  \n  @media (${mediaMedium}) {\n    display: block;\n    width: ${(props) =>\n            props.theme.middleWidth ? props.theme.middleWidth : `90%`};\n    ${(props) =>\n      props.theme.middleTop ? `top: ${props.theme.middleTop};` : ``}\n    transform: translateX(\n      ${(props) =>\n      props.theme.middleTransform\n        ? props.theme.middleTransform\n        : `calc(61% + 32px)`}\n    );\n    z-index: 2;\n  }\n`;\n\nconst Right = styled(Left)`\n  top: 0;\n  margin-top: ${(props) =>\n    props.theme.rightMediaTop ? props.theme.rightMediaTop : `-2%`};\n  width: ${(props) =>\n    props.theme.rightMediaWidth ? props.theme.rightMediaWidth : `223%`};\n  transform: translateX(\n    ${(props) =>\n      props.theme.rightMediaTransform\n        ? props.theme.rightMediaTransform\n        : `-16%`}\n  );\n\n  @media (${mediaMedium}) {\n    margin-top: 0;\n    width: ${(props) =>\n            props.theme.rightWidth ? props.theme.rightWidth : `88%`};\n    ${(props) => (props.theme.rightTop ? `top: ${props.theme.rightTop};` : ``)}\n    transform: translateX(\n      ${(props) =>\n      props.theme.rightTransform\n        ? props.theme.rightTransform\n        : `calc(112% + 65px)`}\n    );\n    z-index: 3;\n  }\n`;\n\nconst Animation = styled(Image)`\n  margin: 0;\n  transform: translateX(${(props) => (props.theme.left ? 30 : -30)}%);\n  animation: ${(props) =>\n    props.active\n      ? css`\n          ${props.theme.left\n            ? SlideInRight\n            : SlideInLeft} 0.8s ease forwards 0.5s\n        `\n      : \"none\"};\n  animation-delay: ${(props) => props.mediaDelay ?? 0}s;\n\n  @media (max-width: 830px) {\n    width: 100%;\n    max-width: 100% !important;\n    max-height: none !important;\n  }\n\n  @media (${mediaMedium}) {\n    animation-delay: ${(props) => props.delay ?? 0}s;\n  }\n`;\n\nconst Threshold = [0, 0.3, 0.5, 1];\n\nconst HorizontalPhonesAnimation = ({ images, forceActive, theme = {} }) => {\n  const { ref, inView } = useInView({\n    threshold: Threshold,\n    delay: 30,\n    triggerOnce: true\n  });\n\n  const activeAnimation = forceActive ?? inView;\n\n  return (\n    <ThemeProvider theme={theme}>\n      <ContainerRelative>\n        <BoxPosition>\n          <Wrapper ref={ref} theme={theme}>\n            {images.one && (\n              <Left width={images.one.childImageSharp.fluid.maxWidth}>\n                <Animation\n                  fluid={images.one.childImageSharp.fluid}\n                  active={activeAnimation}\n                  delay={theme && theme.left ? 0.1 : 0.3}\n                  mediaDelay={theme && theme.left ? 0.1 : 0.2}\n                />\n              </Left>\n            )}\n            {images.two && (\n            <Middle width={images.two.childImageSharp.fluid.maxWidth}>\n              <Animation\n                fluid={images.two.childImageSharp.fluid}\n                active={activeAnimation}\n                delay={0.2}\n              />\n            </Middle>\n            )}\n            {images.three && (\n              <Right width={images.three.childImageSharp.fluid.maxWidth}>\n                <Animation\n                  fluid={images.three.childImageSharp.fluid}\n                  active={activeAnimation}\n                  delay={theme && theme.left ? 0.3 : 0.1}\n                  mediaDelay={theme && theme.left ? 0.2 : 0.1}\n                />\n              </Right>\n            )}\n          </Wrapper>\n        </BoxPosition>\n      </ContainerRelative>\n    </ThemeProvider>\n  );\n};\n\nexport default HorizontalPhonesAnimation;\n","module.exports = __webpack_public_path__ + \"static/12-yellow-guides-462802577a7295289fde21045ff0ae23.png\";","import React from \"react\";\nimport styled from \"styled-components\";\nimport Container from \"./styles/Container\";\nimport { Headline64 } from \"./styles/Headings\";\nimport { Body20 } from \"./styles/BodyTypes\";\nimport PrimaryButton from \"./PrimaryButton\";\nimport { brandColor2, white } from \"./styles/Colors\";\nimport { mediaMedium } from \"./styles/variables\";\nimport imageDecoration from \"../images/12-yellow-guides.png\";\nimport OutlinedText from \"./styles/OutlinedText\";\n\nconst Box = styled.div`\n  max-width: 90%;\n\n  @media (${mediaMedium}) {\n    max-width: 80%;\n    padding-top: 112px;\n  }\n`;\n\nconst Grid = styled(Container)`\n  padding-top: 92px;\n  padding-bottom: 96px;\n\n  @media (${mediaMedium}) {\n    padding-top: 88px;\n    padding-bottom: 88px;\n    display: grid;\n    grid-template-columns: 50% 50%;\n    grid-gap: 16px;\n    position: relative;\n\n    &:after {\n      position: absolute;\n      content: \"\";\n      width: 100%;\n      top: 0;\n      height: 100%;\n      left: 50%;\n      background: url(\"${imageDecoration}\") top left no-repeat;\n      background-size: contain;\n      pointer-events: none;\n    }\n  }\n`;\n\nconst Background = styled.div`\n  background-color: ${brandColor2};\n  overflow: hidden;\n`;\n\nconst HeroBlueCTA = ({ title, outline, description, link, linkLabel, theme }) => {\n  return (\n    <Background>\n      <Grid>\n        <div>\n          <Headline64 theme={{ color: white, ...theme }}>\n            {title}\n            <br />\n            <OutlinedText color={white} component=\"span\" fill={brandColor2}>\n              {outline}\n            </OutlinedText>\n          </Headline64>\n        </div>\n        <Box>\n          <Body20\n            theme={{ color: white }}\n            dangerouslySetInnerHTML={{ __html: description }}\n          />\n          {link && (\n            <PrimaryButton attrs={link}>{linkLabel ?? \"Sign Up\"}</PrimaryButton>\n          )}\n        </Box>\n      </Grid>\n    </Background>\n  );\n};\n\nexport default HeroBlueCTA;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport ContentSnippet from \"./ContentSnippet\";\nimport Container from \"./styles/Container\";\nimport { mediaMedium } from \"./styles/variables\";\nimport Image from \"./Image\";\nimport { black1, white } from \"./styles/Colors\";\nimport AnimationWrapper from \"./AnimationWrapper\";\n\nconst Wrapper = styled.div`\n  overflow: ${(props) =>\n          props.theme.overflow ? props.theme.overflow : \"hidden\"};\n  position: relative;\n  z-index: 2;\n  padding: ${(props) =>\n    props.theme.paddingMedia ? props.theme.paddingMedia : \"93px 0 0\"};\n  background: ${(props) =>\n      props.backgroundImage ? `url(${props.backgroundImage})` : props.theme.backgroundColor ? props.theme.backgroundColor : \"\"}\n    55% 0% no-repeat ${(props) => props.color};\n  background-size: auto 100%;\n  margin: ${(props) =>\n    props.theme.marginMedia ? props.theme.marginMedia : \"0\"};\n  ${(props) =>\n          props.theme.marginTop && `margin-top: ${props.theme.marginTop};`};\n  ${(props) =>\n          props.theme.wrapperStyles && props.theme.wrapperStyles};\n  \n  @media (${mediaMedium}) {\n    padding: ${(props) =>\n      props.theme.paddingDesktop\n        ? props.theme.paddingDesktop\n        : \"153px 0 127px\"};\n    background-size: cover;\n    background-position: top center;\n    margin: ${(props) =>\n      props.theme.marginDesktop ? props.theme.marginDesktop : \"0 auto\"};\n  }\n`;\n\nconst Grid = styled.div`\n  position: relative;\n\n  @media (${mediaMedium}) {\n    display: ${(props) => (props.noGrid ? \"block\" : \"grid\")};\n    width: 100%;\n    grid-template-columns: calc(100% * 5 / 12);\n    justify-content: ${(props) => (props.reverse ? \"end\" : \"start\")};\n  }\n`;\n\nconst Overflow = styled.div`\n  display: none;\n  pointer-events: none;\n\n  .gatsby-image-wrapper {\n    width: 100%;\n  }\n\n  @media (${mediaMedium}) {\n    display: block;\n    position: absolute;\n    right: ${(props) =>\n      props.theme.imageRight ? props.theme.imageRight : \"initial\"};\n    left: ${(props) => (props.theme.imageLeft ? props.theme.imageLeft : \"45%\")};\n    top: ${(props) => (props.theme.imageTop ? props.theme.imageTop : \"174px\")};\n    width: ${(props) => (props.divWidth ? props.divWidth : props.divWidth)}px;\n    height: auto;\n    max-width: ${(props) =>\n      props.theme.overflowWidth ? `${props.theme.overflowWidth}px` : \"none\"};\n  }\n`;\n\nconst Display = styled(Image)`\n  width: ${(props) => props.theme.imgWidth ? props.theme.imgWidth : \"calc(100% + 40px)\"};\n  max-width: ${(props) => props.theme.imgWidth ? props.theme.imgWidth : \"calc(100% + 40px)\"};\n  transform: translateX(${(props) => props.theme.imgTransform ?? \"-20px\"});\n\n  @media (${mediaMedium}) {\n    display: none;\n  }\n`;\n\nconst Content = styled.div`\n  margin-bottom: ${(props) => props.theme.contentMarginBottom ?? \"100px\"};\n  position: relative;\n  z-index: 1;\n\n  @media (${mediaMedium}) {\n    margin-bottom: 0;\n  }\n`;\n\nconst Space = styled.span`\n  position: absolute;\n  top: 0;\n  display: inline-block;\n  width: 1px;\n  margin-top: -5px;\n  height: 5px;\n`;\n\nconst Threshold = [0.05, 0.2, 0.3, 0.5, 0.75];\n\nconst HeroSection = ({\n  animation,\n  title,\n  top,\n  children,\n  alt,\n  images,\n  theme,\n  reverse,\n  noGrid,\n  noTextContent,\n  contentWrapper,\n  backgroundImage,\n  backgroundColor,\n  decoration,\n  displayComponent\n}) => {\n  const Element = decoration ?? \"\";\n\n  return (\n    <Wrapper\n      backgroundImage={backgroundImage}\n      color={backgroundColor ? backgroundColor : alt ? black1 : white}\n      theme={theme}\n    >\n      {Element}\n      <Container>\n        <Grid reverse={reverse} noGrid={noGrid}>\n          <Content theme={theme}>\n            {noTextContent ? children : (\n              <ContentSnippet\n                color={alt}\n                title={title}\n                top={top}\n                contentWrapper={contentWrapper}\n              >\n                {children}\n              </ContentSnippet>\n            )}\n          </Content>\n\n          {!displayComponent && images && images.mobile && !animation && (\n            <div>\n              <Display {...images.mobile} theme={theme} alt={title} />\n            </div>\n          )}\n\n          {!displayComponent && images && images.mobile && animation && (\n            <AnimationWrapper threshold={Threshold} component={animation}>\n              <Space />\n              <Display {...images.mobile} theme={theme} alt={title} />\n            </AnimationWrapper>\n          )}\n        </Grid>\n      </Container>\n      {displayComponent && displayComponent}\n      {!displayComponent && images && images.desktop && (\n        <Overflow\n          theme={theme}\n          divWidth={\n            images.desktop.fluid\n              ? images.desktop.fluid.maxWidth\n              : images.desktop.width\n          }\n        >\n          {!displayComponent && !animation && (\n            <Image alt={title} {...images.desktop} />\n          )}\n\n          {!displayComponent && animation && (\n            <AnimationWrapper threshold={Threshold} component={animation}>\n              <Space />\n              <Image alt={title} {...images.desktop} />\n            </AnimationWrapper>\n          )}\n        </Overflow>\n      )}\n    </Wrapper>\n  );\n};\n\nexport default HeroSection;\n","import React from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport styled from \"styled-components\";\n\nconst Div = styled.div``;\n\nconst AnimationWrapper = ({\n  component,\n  children,\n  threshold = [0, 0.5, 0.75],\n  triggerOnce = true\n}) => {\n  const { ref, inView } = useInView({\n    threshold: threshold,\n    delay: 30,\n    triggerOnce\n  });\n\n  return (\n    <div ref={ref}>\n      <Div as={component} active={inView}>\n        {children}\n      </Div>\n    </div>\n  );\n};\n\nexport default AnimationWrapper;\n"],"sourceRoot":""}