{"version":3,"sources":["webpack:///./src/components/MainHero/index.js","webpack:///./src/components/FaqTile/index.js","webpack:///./src/components/MainTable/index.js","webpack:///./src/components/AnnualSubscription/index.js","webpack:///./src/components/ValueTiles/index.js","webpack:///./src/components/PointsDaysHero/index.js","webpack:///./src/components/SummerInsidersHero/index.js","webpack:///./src/pages/index.js","webpack:///./src/components/TextBox/index.js","webpack:///./src/components/PageLandmark/styles.js","webpack:///./src/components/PageLandmark/index.js","webpack:///./src/components/PageBuilder/index.js","webpack:///./src/components/Wrapper/index.js","webpack:///./src/components/TextBox/styles.js"],"names":["Hero","styled","section","theme","breakpoints","tablet","desktop","Badge","div","colors","primaryRed","fonts","inter","fontSizes","mobileParagraph","desktopParagraph","StyledHero","backgroundImage","Image","img","ImageContainer","Content","Container","desktopHeader","lineHeights","MainHero","data","title","description","badge","callToAction","image","mainHeroClassName","asset","url","className","document","json","route","linkUrl","customStyle","style","linkText","src","alt","altText","aria-hidden","FaqSection","secondaryGrey","mobileLink","tabletCallOut","desktopCallOut","FaqSectionContent","FaqTile","intl","useIntl","base","content","ariaLabel","value","target","fields","locale","Wrapper","ButtonLink","Table","table","secondaryGrey4","primaryPink2","mobileCallOut","Cell","index","child","scope","MainTable","useState","componentLoaded","setComponentLoaded","useEffect","tableItems","mainTableItems","map","id","text","row1","row2","key","firstRow","slice","remainingItems","length","Subscription","lang","SubscriptionHeader","desktopSubscriptionHeader","primaryPink","SubscriptionTile","dropShadow","pageSection","props","AnnualSubscription","subscriptionTiles","tile","TileWrapper","Tiles","Tile","primaryGrey","ValueTiles","valueTiles","icon","blueberry","PointsDaysHero","Backdrop","packetBase","css","PacketOne","PacketTwo","BackdropImage","SummerInsidersHero","StyledHomePage","PaddingTop","pageTemplate","TextBox","HomePage","contentfulPage","contentfulLayout","location","pageMetaTitle","pageMetaDescription","pageSections","optionalNotificationBanners","header","footer","Layout","notificationBanners","PageBuilder","sections","template","heading","renderNode","BLOCKS","PARAGRAPH","_","children","HEADING_2","subHeadingOptions","INLINES","HYPERLINK","node","TextLink","uri","UL_LIST","Separator","hr","headingRTF","paragraphRTF","showNextSectionDividingLine","anchorName","textAlign","subHeading","replace","options","HeaderOffsetDiv","PageLandmark","anchor","split","join","toLowerCase","PageBuild","Page","sectionStyleVariant","anchorID","console","warn","componentType","Object","keys","includes","Component","SubHeading","p","Heading","h2"],"mappings":"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","file":"component---src-pages-index-js-5eeec730b399a5ca5b8d.js","sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport Text from '../ContentfulText';\nimport ButtonLink from '../UI/ButtonLink';\nimport Container from '../Container';\n\nconst Hero = styled.section`\n  color: white;\n  -webkit-font-smoothing: antialiased;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    justify-content: space-between;\n    flex-direction: row;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    padding: 142px 0;\n  }\n\n  &.annual-subscription-hero {\n    @media (min-width: 1440px) and (max-width: 2511px) {\n      padding: 190px 0;\n    }\n  }\n\n  p {\n    margin: 0;\n  }\n`;\n\nconst Badge = styled.div`\n  background-color: ${({ theme }) => theme.colors.primaryRed};\n  font-family: ${({ theme }) => theme.fonts.inter};\n  padding: 6px 12px;\n  border-radius: 4px;\n  font-weight: 600;\n  font-size: ${({ theme }) => theme.fontSizes.mobileParagraph};\n  text-align: center;\n  margin-bottom: 8px;\n  display: inline-block;\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    font-size: ${({ theme }) => theme.fontSizes.desktopParagraph};\n    margin-bottom: 10px;\n  }\n`;\n\nconst StyledHero = styled.section`\n  overflow: hidden;\n  background-image: url(${({ backgroundImage }) => backgroundImage});\n  background-size: cover;\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    margin: 32px 40px 0;\n    border-radius: 25px;\n    background-position: right;\n  }\n\n  @media (min-width: 1680px) {\n    max-width: 1585px;\n    margin: 32px auto 0;\n  }\n`;\n\nconst Image = styled.img`\n  position: absolute;\n  top: -50px;\n  right: -110px;\n  max-width: 412px;\n\n  @media (max-width: 375px) {\n    bottom: 0;\n    right: -170px;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    bottom: 0;\n    right: -150px;\n    max-width: 450px;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    max-width: 700px;\n    right: -215px;\n    top: -40px;\n  }\n\n  @media (min-width: 1200px) {\n    max-width: 750px;\n    top: -50px;\n  }\n`;\n\nconst ImageContainer = styled.div`\n  flex-grow: 1;\n`;\n\nconst Content = styled(Container)`\n  order: 1;\n  margin: 375px 0 80px;\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    width: 55%;\n    order: 0;\n    margin: 112px 0 122px 4.5vw;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    order: 0;\n    margin: 0;\n  }\n\n  h1 {\n    font-size: 2rem;\n    line-height: 2.375rem;\n\n    @media ${({ theme }) => theme.breakpoints.tablet} {\n      font-size: 2.5rem;\n      line-height: 3rem;\n    }\n\n    @media ${({ theme }) => theme.breakpoints.desktop} {\n      font-size: ${({ theme }) => theme.fontSizes.desktopHeader};\n      line-height: 4.5rem;\n      margin-bottom: 0;\n    }\n  }\n\n  p {\n    font-family: ${({ theme }) => theme.fonts.inter};\n    font-weight: 400;\n    font-size: ${({ theme }) => theme.fontSizes.desktopParagraph};\n    line-height: ${({ theme }) => theme.lineHeights.desktopParagraph};\n    max-width: 700px;\n  }\n\n  p:empty {\n    display: none;\n  }\n\n  a {\n    margin-top: 16px;\n    width: 100%;\n\n    @media ${({ theme }) => theme.breakpoints.tablet} {\n      width: 285px;\n      margin-top: 32px;\n    }\n  }\n`;\n\nconst MainHero = ({ data }) => {\n  const {\n    backgroundImage,\n    title,\n    description,\n    badge,\n    callToAction,\n    image,\n  } = data;\n\n  const mainHeroClassName =\n    !description && !callToAction ? 'annual-subscription-hero' : '';\n\n  return (\n    <StyledHero backgroundImage={backgroundImage.asset.url}>\n      <Hero className={mainHeroClassName}>\n        <Content>\n          {badge && <Badge>{badge}</Badge>}\n          <Text document={title.json} />\n          {description && <Text document={description.json} />}\n          {callToAction && (\n            <ButtonLink\n              route=\"external\"\n              url={callToAction.linkUrl}\n              customStyle={[callToAction.style, 'block']}\n            >\n              {callToAction.linkText}\n            </ButtonLink>\n          )}\n        </Content>\n        <ImageContainer>\n          <Image src={image.asset.url} alt={image.altText} aria-hidden />\n        </ImageContainer>\n      </Hero>\n    </StyledHero>\n  );\n};\n\nMainHero.propTypes = {\n  data: PropTypes.shape().isRequired,\n};\n\nexport default MainHero;\n","import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { useIntl } from 'gatsby-plugin-intl';\n\nimport ButtonLink from '../UI/ButtonLink';\nimport Wrapper from '../Wrapper';\nimport Text from '../ContentfulText';\n\nconst FaqSection = styled.section`\n  display: flex;\n  color: ${({ theme }) => theme.colors.secondaryGrey};\n  background-image: url(${({ backgroundImage }) => backgroundImage});\n  background-position: center;\n  background-size: cover;\n  border-radius: 24px;\n  background-repeat: no-repeat;\n  margin-bottom: 24px;\n  flex-direction: column;\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    flex-direction: row;\n    margin-bottom: 32px;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    margin-bottom: 80px;\n  }\n\n  a {\n    margin-top: 16px;\n    font-size: ${({ theme }) => theme.fontSizes.mobileLink};\n    width: 100%;\n\n    @media ${({ theme }) => theme.breakpoints.tablet} {\n      margin-top: 24px;\n      max-width: 235px;\n    }\n\n    @media ${({ theme }) => theme.breakpoints.tablet} {\n      margin-top: 24px;\n      max-width: 235px;\n    }\n  }\n\n  h1 {\n    margin-bottom: 8px;\n    font-size: ${({ theme }) => theme.fontSizes.tabletCallOut};\n\n    @media ${({ theme }) => theme.breakpoints.desktop} {\n      font-size: ${({ theme }) => theme.fontSizes.desktopCallOut};\n    }\n  }\n\n  p {\n    font-family: ${({ theme }) => theme.fonts.inter};\n    font-size: ${({ theme }) => theme.fontSizes.mobileParagraph};\n    line-height: ${({ theme }) => theme.lineHeights.mobileParagraph};\n    margin: 0;\n\n    @media ${({ theme }) => theme.breakpoints.tablet} {\n      line-height: ${({ theme }) => theme.lineHeights.desktopParagraph};\n    }\n\n    @media ${({ theme }) => theme.breakpoints.desktop} {\n      font-size: ${({ theme }) => theme.fontSizes.desktopParagraph};\n    }\n  }\n`;\n\nconst FaqSectionContent = styled.div`\n  flex-grow: 1;\n  padding: 24px;\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    padding: 32px;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    padding: 64px 54px 54px 64px;\n  }\n`;\n\nconst FaqTile = ({ data }) => {\n  const intl = useIntl();\n  const { title, description, callToAction, backgroundImage } = data;\n\n  const base = description.json.content[0].content;\n  const ariaLabel = `${base[0].value}${\n    base[1].data.target.fields.linkText[`${intl.locale}-CA`]\n  }${base[2].value}${base[4].value}`;\n\n  return (\n    <Wrapper>\n      <FaqSection backgroundImage={backgroundImage.asset.url}>\n        <FaqSectionContent>\n          <Text document={title.json} />\n          <Text document={description.json} />\n          <ButtonLink\n            customStyle={['block', callToAction.style]}\n            url={callToAction.linkUrl}\n            ariaLabel={ariaLabel}\n          >\n            {callToAction.linkText}\n          </ButtonLink>\n        </FaqSectionContent>\n      </FaqSection>\n    </Wrapper>\n  );\n};\n\nFaqTile.propTypes = {\n  data: PropTypes.shape().isRequired,\n};\n\nexport default FaqTile;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport RichText from '../ContentfulText';\nimport Wrapper from '../Wrapper';\n\nimport PropTypes from 'prop-types';\n\nconst Table = styled.table`\n  margin: 24px 0;\n  border-collapse: separate;\n  border-spacing: 0;\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    margin: 24px 0 64px;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    margin: 40px 0 80px;\n  }\n\n  p {\n    margin: 0;\n  }\n\n  th,\n  td {\n    padding: 16px;\n    border-bottom: 1px solid ${({ theme }) => theme.colors.secondaryGrey4};\n    vertical-align: middle;\n\n    &:first-of-type {\n      border-left: 1px solid ${({ theme }) => theme.colors.secondaryGrey4};\n    }\n\n    &:last-child {\n      border-right: 1px solid ${({ theme }) => theme.colors.secondaryGrey4};\n    }\n\n    img {\n      vertical-align: middle;\n    }\n  }\n\n  thead {\n    th:not(:first-of-type) {\n      background-color: ${({ theme }) => theme.colors.primaryPink2};\n      padding: 5px;\n      width: 87px;\n\n      @media ${({ theme }) => theme.breakpoints.tablet} {\n        width: 169px;\n        padding: 16px;\n      }\n\n      @media ${({ theme }) => theme.breakpoints.desktop} {\n        padding: 32px;\n        width: 216px;\n      }\n\n      img {\n        height: auto;\n\n        @media ${({ theme }) => theme.breakpoints.tablet} {\n          width: 121px;\n        }\n        @media ${({ theme }) => theme.breakpoints.desktop} {\n          width: 152px;\n        }\n      }\n    }\n  }\n\n  tbody {\n    td:not(:first-of-type) {\n      text-align: center;\n    }\n\n    p {\n      font-family: ${({ theme }) => theme.fonts.inter};\n      font-size: ${({ theme }) => theme.fontSizes.mobileParagraph};\n      line-height: 1.25rem;\n\n      @media ${({ theme }) => theme.breakpoints.tablet} {\n        font-size: ${({ theme }) => theme.fontSizes.desktopParagraph};\n        line-height: ${({ theme }) => theme.lineHeights.desktopParagraph};\n      }\n    }\n  }\n\n  tr {\n    &:first-child th:last-child {\n      border-top-right-radius: 8px;\n      @media ${({ theme }) => theme.breakpoints.tablet} {\n        border-top-right-radius: 24px;\n      }\n    }\n\n    &:first-child th:nth-child(2) {\n      border-top-left-radius: 8px;\n      @media ${({ theme }) => theme.breakpoints.tablet} {\n        border-top-left-radius: 24px;\n      }\n    }\n\n    &:first-child td:first-child {\n      border-top: 1px solid ${({ theme }) => theme.colors.secondaryGrey4};\n      border-top-left-radius: 24px;\n    }\n\n    &:last-child td:first-child {\n      border-bottom-left-radius: 24px;\n    }\n\n    &:last-child td:last-child {\n      border-bottom-right-radius: 24px;\n    }\n\n    &:first-of-type {\n      th:first-of-type {\n        border: none;\n        p {\n          font-size: ${({ theme }) => theme.fontSizes.mobileCallOut};\n          line-height: 1.5rem;\n          font-weight: 600;\n\n          @media ${({ theme }) => theme.breakpoints.tablet} {\n            font-size: ${({ theme }) => theme.fontSizes.tabletCallOut};\n            line-height: ${({ theme }) => theme.lineHeights.tabletCallOut};\n          }\n\n          @media ${({ theme }) => theme.breakpoints.desktop} {\n            font-size: ${({ theme }) => theme.fontSizes.desktopCallOut};\n            line-height: 2.25rem;\n          }\n        }\n      }\n    }\n  }\n`;\n\nconst Cell = ({ index, content }) => {\n  const child = <RichText document={content.json} />;\n  return index > 0 ? <td>{child}</td> : <th scope=\"col\">{child}</th>;\n};\n\nCell.propTypes = {\n  index: PropTypes.number.isRequired,\n  content: PropTypes.shape({\n    json: PropTypes.shape({\n      // eslint-disable-next-line react/forbid-prop-types\n      content: PropTypes.array,\n      data: PropTypes.shape(),\n      nodeType: PropTypes.string,\n    }),\n  }).isRequired,\n};\n\nconst MainTable = ({ data }) => {\n  const [componentLoaded, setComponentLoaded] = useState(false);\n  useEffect(() => {\n    setComponentLoaded(true);\n  }, []);\n\n  const { mainTableItems } = data;\n  const tableItems = mainTableItems.map(({ id, text, row1, row2 }, index) => (\n    <tr key={id}>\n      <Cell index={index} content={text} />\n      <Cell index={index} content={row1} />\n      <Cell index={index} content={row2} />\n    </tr>\n  ));\n\n  const firstRow = tableItems.slice(0, 1);\n  const remainingItems = tableItems.slice(1, tableItems.length);\n\n  return (\n    <Wrapper>\n      {componentLoaded && (\n        <Table>\n          <thead>{firstRow}</thead>\n          <tbody>{remainingItems}</tbody>\n        </Table>\n      )}\n    </Wrapper>\n  );\n};\n\nMainTable.propTypes = {\n  data: PropTypes.shape().isRequired,\n};\n\nexport default MainTable;\n","import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { useIntl } from 'gatsby-plugin-intl';\n\nimport Text from '../ContentfulText';\nimport Wrapper from '../Wrapper';\n\nconst Subscription = styled(Wrapper)`\n  background-image: url(${({ backgroundImage }) => backgroundImage});\n  background-repeat: no-repeat;\n  background-size: contain;\n  padding-top: ${({ lang }) => (lang === 'fr' ? '425px' : '350px')};\n  background-position: top 350px center;\n\n  @media (min-width: 375px) {\n    padding-top: ${({ lang }) => (lang === 'fr' ? '350px' : '280px')};\n    background-position: top 290px center;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    padding-top: 230px;\n    background-position: top 160px center;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    padding-top: 120px;\n    background-position: top center;\n  }\n\n  @media (min-width: 1050px) {\n    padding-top: 80px;\n    background-position: top -80px center;\n  }\n\n  p:empty {\n    display: none;\n  }\n`;\n\nconst SubscriptionHeader = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 38px 0 20px;\n  flex-direction: column;\n  margin: 24px 0;\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    flex-direction: row;\n    margin: 0;\n  }\n\n  h1 {\n    font-size: ${({ theme }) => theme.fontSizes.mobileCallOut};\n    color: ${({ theme }) => theme.colors.secondaryGrey};\n    text-align: center;\n    margin-bottom: 5px;\n\n    @media ${({ theme }) => theme.breakpoints.tablet} {\n      margin-bottom: 0;\n      text-align: right;\n    }\n\n    @media ${({ theme }) => theme.breakpoints.desktop} {\n      font-size: ${({ theme }) => theme.fontSizes.desktopSubscriptionHeader};\n    }\n  }\n\n  h2 {\n    color: ${({ theme }) => theme.colors.primaryPink};\n    font-size: 3rem;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    @media ${({ theme }) => theme.breakpoints.tablet} {\n      flex-direction: row;\n      margin-left: 14px;\n      white-space: pre;\n    }\n\n    @media ${({ theme }) => theme.breakpoints.desktop} {\n      font-size: ${({ theme }) => theme.fontSizes.desktopHeader};\n    }\n\n    sub {\n      font-size: 1rem;\n\n      @media ${({ theme }) => theme.breakpoints.tablet} {\n        font-size: 0.875rem;\n      }\n\n      @media ${({ theme }) => theme.breakpoints.desktop} {\n        font-size: ${({ theme }) => theme.fontSizes.desktopSubscriptionHeader};\n      }\n    }\n  }\n`;\n\nconst SubscriptionTile = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background-image: url(${({ backgroundImage }) => backgroundImage});\n  box-shadow: ${({ theme }) => theme.dropShadow.pageSection};\n  background-size: cover;\n  border-radius: 24px;\n  padding: 24px;\n\n  &:nth-of-type(odd) {\n    img {\n      @media ${({ theme }) => theme.breakpoints.tablet} {\n        position: relative;\n        right: 16px;\n      }\n      @media ${({ theme }) => theme.breakpoints.desktop} {\n        right: 32px;\n      }\n    }\n  }\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    padding: 48px;\n    flex-direction: row;\n\n    &:nth-of-type(odd) {\n      h2 {\n        order: 1;\n      }\n    }\n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    padding: 64px;\n  }\n\n  &:not(:last-of-type) {\n    margin-bottom: 32px;\n  }\n\n  & > * {\n    flex-basis: 50%;\n    flex-shrink: 0;\n  }\n\n  h2 {\n    font-size: 1.625rem;\n    line-height: 1.875rem;\n    color: ${({ theme }) => theme.colors.primaryPink};\n    margin-bottom: 24px;\n\n    @media ${({ theme }) => theme.breakpoints.tablet} {\n      margin-bottom: 0;\n    }\n\n    @media ${({ theme }) => theme.breakpoints.desktop} {\n      font-size: 2.625rem;\n      line-height: ${({ theme }) => theme.lineHeights.desktopCallOut};\n    }\n  }\n`;\n\nconst ImageContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  img {\n    height: auto;\n    width: ${props => (props.index === 1 ? '240px' : '140px')};\n\n    @media ${({ theme }) => theme.breakpoints.tablet} {\n      width: ${props => (props.index === 1 ? '280px' : '140px')};\n    }\n    @media ${({ theme }) => theme.breakpoints.desktop} {\n      width: ${props => (props.index === 1 ? '515px' : '245px')};\n    }\n  }\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    min-width: unset;\n  }\n`;\n\nconst AnnualSubscription = ({ data }) => {\n  const { locale } = useIntl();\n  const { backgroundImage, title, description, subscriptionTiles } = data;\n  \n  return (\n    <Subscription lang={locale} backgroundImage={backgroundImage.asset.url}>\n      <SubscriptionHeader>\n        {title && <Text document={title.json} />}\n        {description && <Text document={description.json} />}\n      </SubscriptionHeader>\n      {subscriptionTiles.map((tile, index) => (\n        <SubscriptionTile\n          backgroundImage={tile.backgroundImage.asset.url}\n          key={tile.id}\n        >\n          <Text document={tile.title.json} />\n          <ImageContainer index={index}>\n            <img src={tile.image.asset.url} alt={tile.image.altText} />\n          </ImageContainer>\n        </SubscriptionTile>\n      ))}\n    </Subscription>\n  );\n};\n\nAnnualSubscription.propTypes = {\n  data: PropTypes.shape().isRequired,\n};\n\nexport default AnnualSubscription;\n","import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport Wrapper from '../Wrapper';\nimport Text from '../ContentfulText';\n\nconst TileWrapper = styled(Wrapper)`\n  position: relative;\n`;\n\nconst Tiles = styled.div`\n  display: flex;\n  position: absolute;\n  top: -60px;\n  left: 0;\n  right: 0;\n  flex-direction: column;\n  box-shadow: ${({ theme }) => theme.dropShadow.pageSection};\n  border-radius: 16px;\n  padding: 24px;\n  background: white;\n  z-index: 2;\n\n  div:not(:last-of-type) {\n    margin-bottom: 25px;\n\n    @media ${({ theme }) => theme.breakpoints.desktop} {\n      margin-bottom: 0;\n    }\n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    padding: 0;\n    background: transparent;\n    justify-content: space-between;\n    flex-direction: row;\n    box-shadow: none;\n    border-radius: unset;\n  }\n\n  p {\n    margin: 0;\n  }\n`;\n\nconst Tile = styled.div`\n  display: flex;\n  align-items: flex-start;\n  background-color: white;\n\n  p {\n    &:first-of-type {\n      font-size: ${({ theme }) => theme.fontSizes.mobileCallOut};\n      margin-bottom: 4px;\n      font-weight: 600;\n      color: ${({ theme }) => theme.colors.secondaryGrey};\n\n      @media ${({ theme }) => theme.breakpoints.tablet} {\n        font-size: 1rem;\n      }\n\n      @media ${({ theme }) => theme.breakpoints.desktop} {\n        margin-bottom: 8px;\n      }\n    }\n\n    &:last-of-type {\n      font-family: ${({ theme }) => theme.fonts.inter};\n      font-size: ${({ theme }) => theme.fontSizes.mobileParagraph};\n      color: ${({ theme }) => theme.colors.primaryGrey};\n      line-height: 1.375rem;\n    }\n  }\n\n  img {\n    max-width: 64px;\n    margin-right: 24px;\n    align-self: flex-start;\n\n    @media ${({ theme }) => theme.breakpoints.tablet} {\n      margin-right: 16px;\n      align-self: center;\n    }\n\n    @media ${({ theme }) => theme.breakpoints.desktop} {\n      max-width: 80px;\n      margin-right: 24px;\n    }\n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    border-radius: 16px;\n    box-shadow: ${({ theme }) => theme.dropShadow.pageSection};\n    padding: 24px;\n    width: calc(100% / 3 - 16px);\n    max-width: 378px;\n  }\n`;\n\nconst ValueTiles = ({ data }) => {\n  const { valueTiles } = data;\n\n  return (\n    <TileWrapper>\n      <Tiles>\n        {valueTiles.map(({ icon, description, title, id }) => (\n          <Tile key={id}>\n            <img src={icon.asset.url} alt={icon.altText} aria-hidden />\n            <div>\n              <Text document={title.json} />\n              <Text document={description.json} />\n            </div>\n          </Tile>\n        ))}\n      </Tiles>\n    </TileWrapper>\n  );\n};\n\nValueTiles.propTypes = {\n  data: PropTypes.shape().isRequired,\n};\n\nexport default ValueTiles;\n","import React from 'react';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport Text from '../ContentfulText';\nimport ButtonLink from '../UI/ButtonLink';\n\nconst Hero = styled.section`\n  color: white;\n  -webkit-font-smoothing: antialiased;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 37px 17px 82px;\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    justify-content: space-between;\n    align-items: flex-start;\n    flex-direction: row;\n    padding: 70px 40px 113px;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    padding: 110px 77px 158px;\n  }\n\n  p {\n    margin: 0;\n  }\n`;\n\nconst Badge = styled.div`\n  background-color: ${({ theme }) => theme.colors.primaryRed};\n  font-family: ${({ theme }) => theme.fonts.inter};\n  padding: 6px 12px;\n  border-radius: 4px;\n  font-weight: 600;\n  font-size: ${({ theme }) => theme.fontSizes.mobileParagraph};\n  text-align: center;\n  margin-bottom: 8px;\n  display: inline-block;\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    font-size: ${({ theme }) => theme.fontSizes.desktopParagraph};\n    margin-bottom: 10px;\n  }\n`;\n\nconst StyledHero = styled.section`\n  overflow: hidden;\n  background-color: ${({ theme }) => theme.colors.blueberry};\n  background-image: url(${({ backgroundImage }) => backgroundImage});\n  background-repeat: repeat-x;\n  background-position: bottom;\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    background-size: 40%;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    margin: 32px 40px 0;\n    border-radius: 25px;\n  }\n\n  @media (min-width: 1680px) {\n    max-width: 1585px;\n    margin: 32px auto 0;\n  }\n`;\n\nconst Image = styled.img`\n  max-width: 100%;\n`;\n\nconst ImageContainer = styled.div`\n  width: 136px;\n  margin-top: 24px;\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    width: 242px;\n    margin-top: 0;\n    padding-top: 34px;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    width: 449px;\n    padding-top: 38px;\n  }\n`;\n\nconst Content = styled.div`\n  h1 {\n    font-size: 2rem;\n    line-height: 2.375rem;\n\n    @media ${({ theme }) => theme.breakpoints.tablet} {\n      font-size: 2.5rem;\n      line-height: 3rem;\n    }\n\n    @media ${({ theme }) => theme.breakpoints.desktop} {\n      font-size: ${({ theme }) => theme.fontSizes.desktopHeader};\n      line-height: 4.5rem;\n      margin-bottom: 0;\n    }\n  }\n\n  p {\n    font-family: ${({ theme }) => theme.fonts.inter};\n    font-weight: 400;\n    font-size: ${({ theme }) => theme.fontSizes.desktopParagraph};\n    line-height: ${({ theme }) => theme.lineHeights.desktopParagraph};\n\n    @media ${({ theme }) => theme.breakpoints.tablet} {\n      max-width: 400px;\n    }\n\n    @media ${({ theme }) => theme.breakpoints.desktop} {\n      max-width: 583px;\n    }\n\n    a {\n      text-decoration: underline;\n    }\n  }\n\n  p:empty {\n    display: none;\n  }\n\n  a {\n    margin-top: 16px;\n    width: 100%;\n\n    @media ${({ theme }) => theme.breakpoints.tablet} {\n      width: 285px;\n      margin-top: 32px;\n    }\n  }\n`;\n\nconst PointsDaysHero = ({ data }) => {\n  const {\n    backgroundImage,\n    title,\n    description,\n    badge,\n    callToAction,\n    image,\n  } = data;\n\n  return (\n    <StyledHero backgroundImage={backgroundImage.asset.url}>\n      <Hero>\n        <Content>\n          {badge && <Badge>{badge}</Badge>}\n          <Text document={title.json} />\n          {description && <Text document={description.json} />}\n          {callToAction && (\n            <ButtonLink\n              route=\"external\"\n              url={callToAction.linkUrl}\n              customStyle={[callToAction.style, 'block']}\n            >\n              {callToAction.linkText}\n            </ButtonLink>\n          )}\n        </Content>\n        <ImageContainer>\n          <Image src={image.asset.url} alt={image.altText} aria-hidden />\n        </ImageContainer>\n      </Hero>\n    </StyledHero>\n  );\n};\n\nPointsDaysHero.propTypes = {\n  data: PropTypes.shape().isRequired,\n};\n\nexport default PointsDaysHero;\n","import React from 'react';\nimport styled, { css } from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport Text from '../ContentfulText';\nimport ButtonLink from '../UI/ButtonLink';\nimport Container from '../Container';\n\nconst Hero = styled.section`\n  color: white;\n  -webkit-font-smoothing: antialiased;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  z-index: 1;\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    justify-content: space-between;\n    flex-direction: row;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    padding: 142px 0;\n  }\n\n  &.annual-subscription-hero {\n    @media (min-width: 1440px) and (max-width: 2511px) {\n      padding: 190px 0;\n    }\n  }\n\n  p {\n    margin: 0;\n  }\n`;\n\nconst Badge = styled.div`\n  background-color: ${({ theme }) => theme.colors.primaryRed};\n  font-family: ${({ theme }) => theme.fonts.inter};\n  padding: 6px 12px;\n  border-radius: 4px;\n  font-weight: 600;\n  font-size: ${({ theme }) => theme.fontSizes.mobileParagraph};\n  text-align: center;\n  margin-bottom: 8px;\n  display: inline-block;\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    font-size: ${({ theme }) => theme.fontSizes.desktopParagraph};\n    margin-bottom: 10px;\n  }\n`;\n\nconst StyledHero = styled.section`\n  position: relative;\n  overflow: hidden;\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    margin: 32px 40px 0;\n    border-radius: 25px;\n    background-position: right;\n  }\n\n  @media (min-width: 1680px) {\n    max-width: 1585px;\n    margin: 32px auto 0;\n  }\n`;\n\nconst Image = styled.img`\n  position: absolute;\n  top: -50px;\n  right: -110px;\n  max-width: 412px;\n\n  @media (max-width: 375px) {\n    bottom: 0;\n    right: -170px;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    bottom: 0;\n    right: -150px;\n    max-width: 450px;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    max-width: 700px;\n    right: -215px;\n    top: -40px;\n  }\n\n  @media (min-width: 1200px) {\n    max-width: 750px;\n    top: -50px;\n  }\n`;\n\nconst ImageContainer = styled.div`\n  flex-grow: 1;\n`;\n\nconst Content = styled(Container)`\n  order: 1;\n  margin: 375px 0 80px;\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    width: 55%;\n    order: 0;\n    margin: 112px 0 122px 4.5vw;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    order: 0;\n    margin: 0;\n  }\n\n  h1 {\n    font-size: 2rem;\n    line-height: 2.375rem;\n\n    @media ${({ theme }) => theme.breakpoints.tablet} {\n      font-size: 2.5rem;\n      line-height: 3rem;\n    }\n\n    @media ${({ theme }) => theme.breakpoints.desktop} {\n      font-size: ${({ theme }) => theme.fontSizes.desktopHeader};\n      line-height: 4.5rem;\n      margin-bottom: 0;\n    }\n  }\n\n  p {\n    font-family: ${({ theme }) => theme.fonts.inter};\n    font-weight: 400;\n    font-size: ${({ theme }) => theme.fontSizes.desktopParagraph};\n    line-height: ${({ theme }) => theme.lineHeights.desktopParagraph};\n    max-width: 700px;\n  }\n\n  p:empty {\n    display: none;\n  }\n\n  a {\n    margin-top: 16px;\n    width: 100%;\n\n    @media ${({ theme }) => theme.breakpoints.tablet} {\n      width: 285px;\n      margin-top: 32px;\n    }\n  }\n`;\n\nconst Backdrop = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: ${({ theme }) => theme.colors.blueberry};\n`\n\nconst packetBase = css`\n  position: relative;\n  width: auto;\n  height: auto;\n`\nconst PacketOne = styled.div`\n  ${packetBase}\n\n  img:nth-child(1) {\n    top: 25px;\n    left: -55px;\n    width: 110px;\n  }\n\n  img:nth-child(2) {\n    top: 145px;\n    left: 25px;\n    width: 35px;\n    opacity: 0.8;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    top: -22%;\n    left: 42%;\n    transform: scale(1.1);    \n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    top: -13%;\n    left: 45%;\n    transform: scale(1.2);\n  }\n\n  @media (min-width: 1440px) {\n    top: -25%;\n    left: 95%;\n    transform: scale(2);\n  }\n`\n\nconst PacketTwo = styled.div`\n  ${packetBase}\n  display: none;\n\n  img:nth-child(1) {\n    left: 20px;\n    width: 105px;\n  }\n\n  img:nth-child(2) {\n    top: 110px;\n    left: 120px;\n    width: 65px;\n    opacity: 0.8;\n  }\n\n  img:nth-child(3) {\n    top: 155px;\n    left: -65px;\n    width: 155px;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    display: block;\n    left: 82%;\n    top: 75%;\n    transform: scale(1.7);\n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    top: 80%;\n    left: 72%;\n  }\n\n  @media (min-width: 1200px) {\n    top: 77%;\n    left: 86%;\n    transform: scale(1.9);\n  }\n\n  @media (min-width: 2048px) {\n    top: 50%;\n    transform: scale(1);\n    left: -3%;\n  }\n`\nconst BackdropImage = styled.img`\n  position: absolute;\n  transform: rotate(45deg);\n`\n\nconst SummerInsidersHero = ({ data }) => {\n  const {\n    backgroundImage,\n    title,\n    description,\n    badge,\n    callToAction,\n    image,\n  } = data;\n\n  const mainHeroClassName =\n    !description && !callToAction ? 'annual-subscription-hero' : '';\n\n  return (\n    <StyledHero>\n      <Hero className={mainHeroClassName}>\n        <Content>\n          {badge && <Badge>{badge}</Badge>}\n          <Text document={title.json} />\n          {description && <Text document={description.json} />}\n          {callToAction && (\n            <ButtonLink\n              route=\"external\"\n              url={callToAction.linkUrl}\n              customStyle={[callToAction.style, 'block']}\n            >\n              {callToAction.linkText}\n            </ButtonLink>\n          )}\n        </Content>\n        <ImageContainer>\n          <Image src={image.asset.url} alt={image.altText} aria-hidden />\n        </ImageContainer>\n      </Hero>\n      <Backdrop>\n        <PacketOne>\n          <BackdropImage src={backgroundImage.asset.url} />\n          <BackdropImage src={backgroundImage.asset.url} />\n        </PacketOne>\n        <PacketTwo>\n          <BackdropImage src={backgroundImage.asset.url} />\n          <BackdropImage src={backgroundImage.asset.url} />\n          <BackdropImage src={backgroundImage.asset.url} />\n        </PacketTwo>\n      </Backdrop>\n    </StyledHero>\n  );\n};\n\nSummerInsidersHero.propTypes = {\n  data: PropTypes.shape().isRequired,\n};\n\nexport default SummerInsidersHero;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { graphql } from 'gatsby';\nimport { useIntl } from 'gatsby-plugin-intl';\n\nimport Layout from '../components/Layout';\nimport SEO from '../components/SEO/seo.js';\nimport PageBuilder from '../components/PageBuilder';\nimport TextBox from '../components/TextBox';\nimport Container from '../components/Container';\nimport FaqTile from '../components/FaqTile';\nimport MainTable from '../components/MainTable';\nimport AnnualSubscription from '../components/AnnualSubscription';\nimport MainHero from '../components/MainHero';\nimport ValueTiles from '../components/ValueTiles';\nimport PointsDaysHero from '../components/PointsDaysHero';\nimport SummerInsidersHero from '../components/SummerInsidersHero';\n\nconst StyledHomePage = styled.div`\n  padding: 0;\n  width: 100%;\n  justify-content: space-between;\n  background-color: #fcfcfc;\n`;\n\nconst PaddingTop = styled.div`\n  padding-top: 5%;\n\n  @media screen and (max-width: 767px) {\n    padding-top: 4rem;\n  }\n`;\n\nconst pageTemplate = {\n  // eslint-disable-next-line react/prop-types\n  'heading-text-alignment---top': ({ data }) => (\n    <Container>\n      <PaddingTop>\n        <TextBox data={data} />\n      </PaddingTop>\n    </Container>\n  ),\n  'main-page-faq-tile': FaqTile,\n  'main-page-table': MainTable,\n  'main-subscription-section': AnnualSubscription,\n  'main-hero': MainHero,\n  'points-day-hero': PointsDaysHero,\n  'main-value-tiles': ValueTiles,\n  'summer-insiders-hero': SummerInsidersHero,\n};\n\nconst HomePage = ({ data: { contentfulPage, contentfulLayout }, location }) => {\n  const intl = useIntl();\n  const {\n    pageMetaTitle,\n    pageMetaDescription,\n    pageSections,\n    optionalNotificationBanners,\n  } = contentfulPage;\n\n  const { header, footer } = contentfulLayout;\n\n  return (\n    <Layout\n      header={header}\n      footer={footer}\n      notificationBanners={optionalNotificationBanners}\n    >\n      <StyledHomePage>\n        <SEO\n          title={pageMetaTitle}\n          description={pageMetaDescription.pageMetaDescription}\n          lang={intl?.locale}\n          location={location}\n        />\n        <PageBuilder\n          sections={pageSections}\n          template={pageTemplate}\n          intl={intl}\n        />\n      </StyledHomePage>\n    </Layout>\n  );\n};\n\nHomePage.propTypes = {\n  data: PropTypes.shape().isRequired,\n  location: PropTypes.shape().isRequired,\n};\n\nexport const query = graphql`\n  query HomePageQuery($locale: String = \"en-CA\") {\n    contentfulLayout(\n      internalTitle: { eq: \"Main Layout\" }\n      node_locale: { eq: $locale }\n    ) {\n      id\n      node_locale\n      header {\n        id\n        node_locale\n        headerButtons {\n          id\n          internalName\n          linkFrontEndFormat\n          linkText\n          linkUrl\n          style\n        }\n        icon {\n          altText\n          asset {\n            url\n          }\n        }\n        logo {\n          id\n          title\n          localFile {\n            publicURL\n            childImageSharp {\n              fluid {\n                ...GatsbyImageSharpFluid_withWebp_tracedSVG\n                presentationHeight\n                presentationWidth\n              }\n            }\n          }\n        }\n        headerPageLinks {\n          id\n          linkText\n          linkUrl\n          style\n        }\n      }\n      footer {\n        id\n        phoneNumberList {\n          id\n          json\n        }\n        linksList {\n          id\n          json\n        }\n        downloadAppList {\n          id\n          json\n        }\n        googlePlayLink {\n          linkUrl\n          linkText\n          icon {\n            altText\n            asset {\n              url\n            }\n          }\n        }\n        appleStoreLink {\n          linkUrl\n          linkText\n          icon {\n            altText\n            asset {\n              url\n            }\n          }\n        }\n        trademark {\n          id\n          json\n        }\n        node_locale\n        footerLogo {\n          altText\n          asset {\n            url\n          }\n        }\n      }\n    }\n    contentfulPage(internalName: { eq: \"Main\" }, node_locale: { eq: $locale }) {\n      id\n      node_locale\n      pageMetaTitle\n      pageMetaDescription {\n        pageMetaDescription\n      }\n      optionalNotificationBanners {\n        ... on ContentfulNotificationBanner {\n          id\n          isDismissible\n          color\n          bannerCount\n          bannerContent {\n            json\n          }\n        }\n      }\n      pageSections {\n        ... on ContentfulMainHero {\n          id\n          sectionStyleVariant\n          description {\n            json\n          }\n          title {\n            json\n          }\n          badge\n          callToAction {\n            style\n            linkText\n            linkUrl\n            id\n          }\n          image {\n            id\n            altText\n            asset {\n              url\n            }\n          }\n          backgroundImage {\n            asset {\n              url\n            }\n          }\n        }\n        ... on ContentfulMainSubscriptionSection {\n          id\n          sectionStyleVariant\n          title {\n            json\n          }\n          description {\n            json\n          }\n          backgroundImage {\n            id\n            altText\n            asset {\n              url\n            }\n          }\n          subscriptionTiles {\n            id\n            title {\n              json\n            }\n            image {\n              altText\n              asset {\n                url\n              }\n            }\n            backgroundImage {\n              asset {\n                url\n              }\n            }\n          }\n        }\n        ... on ContentfulMainValueTiles {\n          id\n          sectionStyleVariant\n          valueTiles {\n            id\n            title {\n              json\n            }\n            description {\n              json\n            }\n            icon {\n              altText\n              id\n              asset {\n                url\n              }\n              title\n            }\n          }\n        }\n        ... on ContentfulFaqTile {\n          id\n          sectionStyleVariant\n          description {\n            json\n          }\n          title {\n            json\n          }\n          backgroundImage {\n            asset {\n              url\n            }\n          }\n          callToAction {\n            style\n            linkText\n            linkUrl\n            id\n          }\n        }\n        ... on ContentfulMainTable {\n          id\n          sectionStyleVariant\n          mainTableItems {\n            id\n            text {\n              json\n            }\n            row1 {\n              json\n            }\n            row2 {\n              json\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\nexport default HomePage;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { BLOCKS, INLINES } from '@contentful/rich-text-types';\nimport styled from 'styled-components';\n\nimport RichText from '../RichText';\n// import Separator from '../UI/Separator';\nimport TextLink from '../UI/TextLink';\nimport { Wrapper, Heading, Content, SubHeading } from './styles';\n\nconst heading = {\n  renderNode: {\n    [BLOCKS.PARAGRAPH]: (_, children) => <Heading>{children}</Heading>,\n    [BLOCKS.HEADING_2]: (_, children) => <Heading>{children}</Heading>,\n  },\n};\n\nconst subHeadingOptions = {\n  renderNode: {\n    [BLOCKS.PARAGRAPH]: (_, children) => <SubHeading>{children}</SubHeading>,\n  },\n};\n\nconst content = {\n  renderNode: {\n    [BLOCKS.PARAGRAPH]: (_, children) => <Content>{children}</Content>,\n    [INLINES.HYPERLINK]: (node, children) => (\n      <TextLink TextLink customStyle={['red']} url={node.data.uri}>\n        {children}\n      </TextLink>\n    ),\n    [BLOCKS.UL_LIST]: (_, children) => <ul>{children}</ul>,\n  },\n};\n\nconst Separator = styled.hr`\n  margin-top: 24px;\n  border-top: none;\n  border-bottom: 1px solid rgba(158, 147, 166, 0.16);\n  width: 100%;\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    margin-top: 48px;\n  }\n`;\n\nconst TextBox = ({ data }) => {\n  const {\n    headingRTF,\n    paragraphRTF,\n    showNextSectionDividingLine,\n    anchorName,\n    textAlign,\n    subHeading,\n  } = data;\n\n  return (\n    <>\n      {showNextSectionDividingLine && <Separator />}\n      <Wrapper\n        textAlign={textAlign}\n        className=\"textBoxWrapper\"\n        id={anchorName && anchorName.replace(' ', '-')}\n      >\n        {headingRTF && (\n          <RichText document={headingRTF.json} options={heading} />\n        )}\n        {subHeading && (\n          <RichText document={subHeading.json} options={subHeadingOptions} />\n        )}\n        {paragraphRTF && (\n          <RichText document={paragraphRTF.json} options={content} />\n        )}\n      </Wrapper>\n    </>\n  );\n};\n\nTextBox.propTypes = {\n  data: PropTypes.shape().isRequired,\n};\n\nexport default TextBox;\n","import styled from 'styled-components';\n\nconst HeaderOffsetDiv = styled.div`\n  margin-top: calc(-75px - 1rem);\n  padding-top: calc(75px + 1rem);\n`;\n\nexport default HeaderOffsetDiv;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport HeaderOffsetDiv from './styles';\n\nconst PageLandmark = ({ anchor }) => {\n  const id = anchor\n    .split(' ')\n    .join('-')\n    .toLowerCase();\n  return <HeaderOffsetDiv id={id} />;\n};\n\nPageLandmark.propTypes = {\n  anchor: PropTypes.string.isRequired,\n};\n\nexport default PageLandmark;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport PageLandmark from '../PageLandmark';\n\nconst PageBuild = ({ sections, template }) => {\n  if (!sections) return null;\n  const Page = sections.map(({ sectionStyleVariant, anchorID }, index) => {\n    if (anchorID) {\n      return <PageLandmark anchor={anchorID} key={anchorID} />;\n    }\n    if (!sectionStyleVariant) {\n      console.warn(\n        'A component field is requried on all content models to pass the data appropriately'\n      );\n      return false;\n    }\n    const componentType = sectionStyleVariant\n      .split(' ')\n      .join('-')\n      .toLowerCase();\n    const templateIds = Object.keys(template);\n    if (templateIds.includes(componentType)) {\n      const Component = template[componentType];\n      return <Component key={sections[index].id} data={sections[index]} />;\n    }\n    console.warn(\n      `Didnt find a component to match the ${sectionStyleVariant} value`\n    );\n    return false;\n  });\n  return <>{Page}</>;\n};\n\nPageBuild.propTypes = {\n  sections: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n  template: PropTypes.shape().isRequired,\n};\n\nexport default PageBuild;\n","import styled from 'styled-components';\n\nconst Wrapper = styled.div`\n  margin: 0 7.5vw;\n\n  @media screen and (max-width: 1600px) {\n    margin: 0 6vw;\n  }\n\n  @media screen and (max-width: 1200px) {\n    margin: 0 4.5vw;\n  }\n\n  @media screen and (max-width: 640px) {\n    margin: 1rem;\n  }\n\n  @media screen and (min-width: 1441px) {\n    margin: 0 auto;\n    max-width: 1200px;\n  }\n`;\n\nexport default Wrapper;\n","import styled from 'styled-components';\n\nexport const Wrapper = styled.div`\n  width: 100%;\n  text-align: ${({ textAlign }) => textAlign || 'left'};\n\n  h2:empty,\n  p:empty {\n    display: none;\n  }\n\n  &:first-of-type {\n    h2 {\n      margin-top: 24px;\n\n      @media ${({ theme }) => theme.breakpoints.desktop} {\n        margin-top: 64px;\n      }\n    }\n  }\n\n  h3 {\n    font-size: 1.6rem;\n    line-height: 1.05;\n\n    @media screen and (max-width: 600px) {\n      font-size: 1.3rem;\n    }\n  }\n\n  ol {\n    margin-left: 15px;\n    font-family: ${({ theme }) => theme.fonts.inter};\n    color: ${({ theme }) => theme.colors.primaryGrey};\n  }\n`;\n\nexport const SubHeading = styled.p`\n  font-family: ${({ theme }) => theme.fonts.inter};\n  color: ${({ theme }) => theme.colors.primaryGrey};\n  font-weight: bold;\n  font-size: 0.9375rem;\n  margin: 24px 0 8px;\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    margin: 32px 0 16px;\n  }\n\n  @media ${({ theme }) => theme.breakpoints.desktop} {\n    margin: 40px 0 16px;\n  }\n`;\n\nexport const Heading = styled.h2``;\n\nexport const Content = styled.p`\n  font-family: ${({ theme }) => theme.fonts.inter};\n  color: ${({ theme }) => theme.colors.secondaryGrey};\n  line-height: 23px;\n  margin-bottom: 1em;\n  font-weight: 400;\n  font-size: 0.8125rem;\n\n  @media ${({ theme }) => theme.breakpoints.tablet} {\n    font-size: 0.9375rem;\n  }\n`;\n"],"sourceRoot":""}