{"version":3,"sources":["webpack:///./src/images/31-native-ads-mobile.png","webpack:///./src/components/brands/StackAdsBrands.js","webpack:///./src/components/StackEmailAnimation.js","webpack:///./src/components/MoreWaysToEarn.js","webpack:///./src/components/sections/PublishersStackMediaDefer.js","webpack:///./src/images/30-stackbar-mobile.png","webpack:///./src/images/30-stackbar-desktop.png","webpack:///./src/components/SponsorContentAnimation.js","webpack:///./src/images/31-native-ads-desktop.png","webpack:///./src/components/styles/CTALink.js"],"names":["module","exports","Background","styled","div","black1","mediaMedium","Item","props","order","Grid","mediaDesktop","StackMediaBrandsSection","data","Object","keys","map","item","key","component","MoveInBottom","fluid","childImageSharp","StackMediaBrands","useStaticQuery","StackEmailAnimation","theme","forceActive","images","Wrapper","white","twoColumns","Title","Headline40","Snippet","Row","span","MoreWaysToEarn","noSelfShops","margins","attrs","as","Link","to","stackBarImages","desktop","src","stackBarDesktop","width","height","mobile","stackBarMobile","nativeAdsImages","nativeAdDesktop","nativeAdMobile","PublishersStackMediaDefer","heading","top","title","paddingMedia","AnimationComponent","SponsorContentAnimation","variant","bold","underlined","display","paddingDesktop","reverse","displayComponent","alt","animation","FadeInRightSmall","imageTop","overflowWidth","imageLeft","outline","description","linkLabel","link","state","from","Mobile","Desktop","Container","Trigger","Threshold","size","setSize","useState","Math","max","document","documentElement","clientWidth","window","innerWidth","useEffect","debouncedHandleResize","debounce","addEventListener","passive","removeEventListener","ref","inView","useInView","threshold","delay","triggerOnce","VARIANTS","shade","color","brandColor1Shade","hoverColor","brandColor1","tint","brandColor1Tint","gray2","InlineLink","a","$underlined","$bold","CTALink","children","tag"],"mappings":"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","file":"components-sections-PublishersStackMediaDefer-d8added285d3b8525bec.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/31-native-ads-mobile-629db89e79fb24db421e3bbaad015a1a.png\";","import React from \"react\";\nimport { useStaticQuery, graphql } from \"gatsby\";\nimport styled from \"styled-components\";\nimport Image from \"../Image\";\nimport Container from \"../styles/Container\";\nimport { black1 } from \"../styles/Colors\";\nimport { mediaDesktop, mediaMedium } from \"../styles/variables\";\nimport AnimationWrapper from \"../AnimationWrapper\";\nimport { MoveInBottom } from \"../styles/animations\";\n\nconst Background = styled.div`\n  background-color: ${black1};\n  padding: 96px 0;\n\n  @media (${mediaMedium}) {\n    padding: 160px 0;\n  }\n`;\n\nconst Item = styled.div`\n  grid-column: span 1;\n  order: ${(props) => props.order ?? 1};\n\n  &:last-of-type {\n    display: none;\n  }\n\n  @media (${mediaMedium}) {\n    grid-column: span 12;\n    order: 1 !important;\n\n    &:last-of-type {\n      display: block;\n    }\n  }\n`;\n\nconst Grid = styled.div`\n  display: grid;\n  align-items: center;\n  width: 100%;\n  margin: 0 auto;\n  grid-row-gap: 58px;\n  grid-column-gap: 58px;\n  grid-template-columns: repeat(3, 1fr);\n\n  @media (${mediaMedium}) {\n    grid-row-gap: 98px;\n    grid-template-columns: repeat(60, 1fr);\n  }\n\n  .gatsby-image-wrapper {\n    margin: 0 auto;\n    overflow: visible !important;\n  }\n\n  @media (max-width: 829px) {\n    ${Item}:nth-child(3n) {\n      .gatsby-image-wrapper {\n        margin-right: 0;\n      }\n    }\n\n    ${Item}:nth-child(3n-2) {\n      .gatsby-image-wrapper {\n        margin-left: 0;\n      }\n    }\n\n    ${Item}:nth-child(10) {\n      .gatsby-image-wrapper {\n        max-width: 70px !important;\n      }\n    }\n\n    ${Item}:nth-child(22) {\n      .gatsby-image-wrapper {\n        max-width: 60px !important;\n      }\n    }\n\n    ${Item}:nth-child(20) {\n      .gatsby-image-wrapper {\n        max-width: 50px !important;\n      }\n    }\n\n    ${Item}:nth-child(3) {\n      .gatsby-image-wrapper {\n        max-width: 60px !important;\n      }\n    }\n\n    ${Item}:nth-child(6) {\n      .gatsby-image-wrapper {\n        max-width: 46px !important;\n      }\n    }\n  }\n\n  @media (${mediaMedium}) {\n    grid-column-gap: 6px;\n    padding: 0 16px;\n\n    ${Item} {\n      width: 85%;\n    }\n\n    ${Item}:nth-child(5n+1) {\n      text-align: left;\n\n      .gatsby-image-wrapper {\n        margin: 0 auto 0 0;\n      }\n    }\n\n    ${Item}:nth-child(5n) {\n      text-align: right;\n\n      .gatsby-image-wrapper {\n        margin: 0 0 0 auto;\n      }\n    }\n\n    ${Item}:nth-child(6),\n    ${Item}:nth-child(10),\n    ${Item}:nth-child(11),\n    ${Item}:nth-child(15),\n    ${Item}:nth-child(20) {\n      grid-column: span 8;\n    }\n\n    ${Item}:nth-child(n + 8):nth-child(-n + 9),\n    ${Item}:nth-child(n + 13):nth-child(-n + 14),\n    ${Item}:nth-child(19) {\n      grid-column: span 16;\n    }\n  }\n\n  @media (${mediaDesktop}) {\n    grid-column-gap: 16px;\n\n    ${Item} {\n      width: 100%;\n    }\n  }\n`;\n\nconst StackMediaBrandsSection = ({ data }) => {\n  return (\n    <Background>\n      <Container>\n        <Grid>\n          {data &&\n            Object.keys(data).map((item, key) => (\n              <Item key={item} order={key + 1}>\n                <AnimationWrapper component={MoveInBottom}>\n                  <Image fluid={data[item].childImageSharp.fluid} />\n                </AnimationWrapper>\n              </Item>\n            ))}\n        </Grid>\n      </Container>\n    </Background>\n  );\n};\n\nconst StackMediaBrands = () => {\n  const data = useStaticQuery(graphql`\n    query {\n      hellosign: file(relativePath: { eq: \"68-hellosign.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 180, maxHeight: 26, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      godaddy: file(relativePath: { eq: \"68-godaddy.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 158, maxHeight: 33, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      salesforce: file(relativePath: { eq: \"68-salesforce.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 102, maxHeight: 72, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      nationBuilder: file(relativePath: { eq: \"68-nation-builder.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 209, maxHeight: 54, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      monday: file(relativePath: { eq: \"68-monday.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 144, maxHeight: 32, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      mailchimp: file(relativePath: { eq: \"68-mailchimp.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 70, maxHeight: 89, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      lolaCom: file(relativePath: { eq: \"68-lola-com.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 140, maxHeight: 28, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      spectrm: file(relativePath: { eq: \"68-spectrm.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 180, maxHeight: 24, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      snapInc: file(relativePath: { eq: \"68-snap-inc.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 145, maxHeight: 35, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      wix: file(relativePath: { eq: \"68-wix.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 82, maxHeight: 32, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      babbel: file(relativePath: { eq: \"68-babbel.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 110, maxHeight: 24, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      seedInvest: file(relativePath: { eq: \"68-seed-invest.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 110, maxHeight: 24, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      lemonade: file(relativePath: { eq: \"68-lemonade.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 140, maxHeight: 30, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      diversyFund: file(relativePath: { eq: \"68-diversy-fund.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 272, maxHeight: 39, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      trueBill: file(relativePath: { eq: \"68-truebill.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 127, maxHeight: 30, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      zebra: file(relativePath: { eq: \"68-zebra.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 133, maxHeight: 43, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      aspiration: file(relativePath: { eq: \"68-aspiration.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 133, maxHeight: 32, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      arcadiaPower: file(relativePath: { eq: \"68-arcadia-power.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 121, maxHeight: 52, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      pennyHoarder: file(relativePath: { eq: \"68-penny-hoarder.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 228, maxHeight: 23, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      hp: file(relativePath: { eq: \"29-hp.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 58, maxHeight: 56, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      shutterstock: file(relativePath: { eq: \"68-xbox-gamepass.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 164, maxHeight: 41, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      wineAccess: file(relativePath: { eq: \"68-wine-access.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 72, maxHeight: 75, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      trade: file(relativePath: { eq: \"68-trade.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 99, maxHeight: 32, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      tikTok: file(relativePath: { eq: \"68-tiktok.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 139, maxHeight: 40, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      radPowerBikes: file(relativePath: { eq: \"68-rad-power-bikes.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 115, maxHeight: 66, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n    }\n  `);\n  return <StackMediaBrandsSection data={data} />;\n};\n\nexport default StackMediaBrands;\n","import React from \"react\";\nimport { graphql, useStaticQuery } from \"gatsby\";\nimport HorizontalPhonesAnimation from \"./HorizontalPhonesAnimation\";\n\nconst StackEmailAnimation = ({ theme, forceActive }) => {\n  const images = useStaticQuery(graphql`\n    query {\n      one: file(relativePath: { eq: \"32-email-3.png\" }) {\n        childImageSharp {\n          fluid(quality: 80) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      two: file(relativePath: { eq: \"32-email-2.png\" }) {\n        childImageSharp {\n          fluid(quality: 80) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      three: file(relativePath: { eq: \"32-email-1.png\" }) {\n        childImageSharp {\n          fluid(quality: 80) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n    }\n  `);\n\n  return (\n    <HorizontalPhonesAnimation\n      forceActive={forceActive}\n      images={images}\n      theme={theme}\n    />\n  );\n};\n\nexport default StackEmailAnimation;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { white } from \"./styles/Colors\";\nimport { Headline40 } from \"./styles/Headings\";\nimport { Body20 } from \"./styles/BodyTypes\";\nimport { Eyebrows20 } from \"./styles/Eyebrows\";\nimport ArrowButton from \"./ArrowButton\";\nimport Container from \"./styles/Container\";\nimport { mediaMedium } from \"./styles/variables\";\nimport { Link } from \"gatsby\";\n\nconst Wrapper = styled.div`\n  background: ${white};\n  padding: 93px 0 86px;\n\n  @media (${mediaMedium}) {\n    padding: 116px 0 107px;\n  }\n`;\n\nconst Grid = styled.div`\n  @media (${mediaMedium}) {\n    padding-top: 12px;\n    display: grid;\n    grid-template-columns: ${(props) =>\n      props.twoColumns ? \"350px 350px\" : \"1fr 1fr 350px\"};\n\n    grid-column-gap: calc(100% * 1 / 12);\n  }\n`;\n\nconst Title = styled(Headline40)`\n  margin: 0 0 10px;\n\n  @media (${mediaMedium}) {\n    margin: 0 0 24px;\n  }\n`;\n\nconst Snippet = styled.div`\n  padding-top: 44px;\n\n  &:first-child {\n    padding-top: 32px;\n  }\n\n  @media (${mediaMedium}) {\n    padding-top: 32px;\n  }\n`;\n\nconst Row = styled.span`\n  display: block;\n  margin: 22px 0 0;\n`;\n\nconst MoreWaysToEarn = ({ noSelfShops }) => {\n  return (\n    <Wrapper>\n      <Container>\n        <Eyebrows20>More ways to earn</Eyebrows20>\n        <Grid twoColumns={noSelfShops}>\n          <Snippet>\n            <Title>Stackmedia</Title>\n            <Body20 theme={{ margins: \"-9px 0 0\" }}>\n              CPC-based advertising solutions. Earn with every click.\n              <Row>\n                <ArrowButton\n                  attrs={{ as: Link, to: \"/publishers/stack-media/\" }}\n                >\n                  Find Out More\n                </ArrowButton>\n              </Row>\n            </Body20>\n          </Snippet>\n          <Snippet>\n            <Title>Shops</Title>\n            <Body20 theme={{ margins: \"-9px 0 0\" }}>\n              Your branded Shop and access to a suite of commerce tools.\n              <Row>\n                <ArrowButton attrs={{ as: Link, to: \"/publishers/shops/\" }}>\n                  Find Out More\n                </ArrowButton>\n              </Row>\n            </Body20>\n          </Snippet>\n          {!noSelfShops &\n          (\n            <Snippet>\n              <Title>Self-serve shop</Title>\n\n              <Body20 theme={{ margins: \"-9px 0 0\" }}>\n                Easy-to-use commerce solutions. You take the driver’s seat.\n                <Row>\n                  <ArrowButton\n                    attrs={{\n                      to: \"publishers/shop/\"\n                    }}\n                  >\n                    Find Out More\n                  </ArrowButton>\n                </Row>\n              </Body20>\n            </Snippet>\n          ) || \"\"}\n        </Grid>\n      </Container>\n    </Wrapper>\n  );\n};\n\nexport default MoreWaysToEarn;\n","import React from \"react\";\nimport { Link } from \"gatsby\";\nimport StackAdsBrands from \"../brands/StackAdsBrands\";\nimport HeroSectionExtraHeading from \"../HeroSectionExtraHeading\";\nimport CTALink from \"../styles/CTALink\";\nimport HeroSection from \"../HeroSection\";\nimport HeroBlueCTA from \"../HeroBlueCTA\";\nimport MoreWaysToEarn from \"../MoreWaysToEarn\";\nimport { FadeInRightSmall } from \"../styles/animations\";\nimport SponsorContentAnimation from \"../SponsorContentAnimation\";\nimport StackEmailAnimation from \"../StackEmailAnimation\";\n\n// Images\nimport stackBarDesktop from \"../../images/30-stackbar-desktop.png\";\nimport stackBarMobile from \"../../images/30-stackbar-mobile.png\";\nimport nativeAdDesktop from \"../../images/31-native-ads-desktop.png\";\nimport nativeAdMobile from \"../../images/31-native-ads-mobile.png\";\n\nconst stackBarImages = {\n  desktop: {\n    src: stackBarDesktop,\n    width: 1498,\n    height: 880\n  },\n  mobile: {\n    src: stackBarMobile,\n    width: 375,\n    height: 503\n  }\n};\n\nconst nativeAdsImages = {\n  desktop: {\n    src: nativeAdDesktop,\n    width: 1499,\n    height: 881\n  },\n  mobile: {\n    src: nativeAdMobile,\n    width: 375,\n    height: 504\n  }\n};\n\nconst PublishersStackMediaDefer = () => {\n  return (\n    <>\n      <StackAdsBrands />\n\n      <HeroSectionExtraHeading\n        heading=\"Our Offerings\"\n        top=\"01\"\n        title=\"Sponsored Content\"\n        theme={{ paddingMedia: \"91px 0 0\" }}\n        AnimationComponent={SponsorContentAnimation}\n      >\n        Get original sponsored articles written by Stack’s{\" \"}\n        <CTALink\n          variant=\"white\"\n          bold\n          underlined\n          display=\"inline-block\"\n          attrs={{\n            to: \"/publishers/content-studio/\"\n          }}\n        >\n          Content Studio\n        </CTALink>{\" \"}\n        in your site’s voice that drive directly to the brand sites. You earn\n        with every click.\n      </HeroSectionExtraHeading>\n\n      <HeroSection\n        title=\"Email Newsletters\"\n        top=\"02\"\n        theme={{\n          paddingDesktop: \"160px 0 240px\"\n        }}\n        reverse={true}\n        displayComponent={<StackEmailAnimation forceActive={true} />}\n      >\n        Have a robust subscriber list? Dedicate an entire email to one of our\n        top-notch brand partners, or add a brief mention to earn with every\n        send.\n      </HeroSection>\n\n      <HeroSection\n        title=\"Native Ad Units\"\n        top=\"03\"\n        images={nativeAdsImages}\n        alt={true}\n        animation={FadeInRightSmall}\n        theme={{\n          imageTop: \"64px\",\n          paddingDesktop: \"200px 0\",\n          overflowWidth: \"1000\"\n        }}\n      >\n        Unlike a traditional ad, our exclusive native ad units are integrated\n        organically into the reader experience — so you’ll never lose out to ad\n        blockers.\n      </HeroSection>\n\n      <HeroSection\n        title=\"STACKBAR\"\n        top=\"04\"\n        theme={{ imageLeft: \"42.3%\" }}\n        images={stackBarImages}\n      >\n        Easily integrate StackBar into the top of your site to drive clicks\n        without disrupting the user experience.\n      </HeroSection>  \n\n      <HeroBlueCTA\n        title=\"Let’s create\"\n        outline=\"Together\"\n        description=\"It’s easy—just tell us a little bit about your site and audience and you’ll be on your way.\"\n        linkLabel=\"Get Started\"\n        link={{ to: \"/contact/?smopt=publisher\", state: { from: \"publisher\" }, as: Link }}\n      />\n\n      <MoreWaysToEarn />\n    </>\n  );\n};\n\nexport default PublishersStackMediaDefer;\n","module.exports = __webpack_public_path__ + \"static/30-stackbar-mobile-79d3386bc6248248a783aaff4f899644.png\";","module.exports = __webpack_public_path__ + \"static/30-stackbar-desktop-cd18dc32cd5b13ab869b035a80636f93.png\";","import React, { useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\n\nimport ContentAnimation from \"./ContentAnimation\";\nimport { graphql, useStaticQuery } from \"gatsby\";\nimport debounce from \"lodash/debounce\";\nimport { mediaMedium } from \"./styles/variables\";\nimport SponsorContent from \"./SponsorContent\";\nimport Container from \"./styles/Container\";\nimport { useInView } from \"react-intersection-observer\";\n\nconst Mobile = styled.div`\n  @media (${mediaMedium}) {\n    display: none;\n  }\n`;\n\nconst Desktop = styled(Container)`\n  display: none;\n  position: relative;\n\n  @media (${mediaMedium}) {\n    display: block;\n  }\n`;\n\nconst Trigger = styled.div`\n  position: absolute;\n  width: 100%;\n  height: 50vw;\n  top: 0;\n  transform: translateY(-70%);\n  left: 0;\n  pointer-events: none;\n`;\n\nconst Threshold = [0, 0.5, 1];\n\nconst SponsorContentAnimation = () => {\n  const images = useStaticQuery(graphql`\n    query {\n      desktopOne: file(relativePath: { eq: \"33-sponsored-content-1.png\" }) {\n        childImageSharp {\n          fluid(quality: 90) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      desktopTwo: file(relativePath: { eq: \"33-sponsored-content-2.png\" }) {\n        childImageSharp {\n          fluid(quality: 90) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      desktopThree: file(relativePath: { eq: \"33-sponsored-content-3.png\" }) {\n        childImageSharp {\n          fluid(quality: 90) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      contentOne: file(relativePath: { eq: \"44-commerce-content-1.png\" }) {\n        childImageSharp {\n          fluid(quality: 90) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      contentTwo: file(relativePath: { eq: \"44-commerce-content-2.png\" }) {\n        childImageSharp {\n          fluid(quality: 90) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n    }\n  `);\n\n  const [size, setSize] = useState(\n    Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)\n  );\n\n  useEffect(() => {\n    const debouncedHandleResize = debounce(() => {\n      setSize(\n        Math.max(\n          document.documentElement.clientWidth || 0,\n          window.innerWidth || 0\n        )\n      );\n    }, 300);\n\n    window.addEventListener(\"resize\", debouncedHandleResize, { passive: true });\n\n    return () => {\n      window.removeEventListener(\"resize\", debouncedHandleResize, {\n        passive: true\n      });\n    };\n  });\n\n  const { ref, inView } = useInView({\n    threshold: Threshold,\n    delay: 30,\n    triggerOnce: true\n  });\n\n  return (\n    <>\n      {size < 830 && (\n        <Mobile>\n          <ContentAnimation images={images} />\n        </Mobile>\n      )}\n      {size > 829 && (\n        <Desktop>\n          <Trigger ref={ref} />\n          <SponsorContent inView={inView} images={images} />\n        </Desktop>\n      )}\n    </>\n  );\n};\n\nexport default SponsorContentAnimation;\n","module.exports = __webpack_public_path__ + \"static/31-native-ads-desktop-633b3027c67094c0961b9b1e2a3c2a98.png\";","import React from \"react\";\nimport styled from \"styled-components\";\nimport { Link } from \"gatsby\";\nimport {\n  brandColor1,\n  brandColor1Shade,\n  brandColor1Tint,\n  gray2,\n  white\n} from \"./Colors\";\n\nconst VARIANTS = {\n  shade: {\n    color: brandColor1Shade,\n    hoverColor: brandColor1\n  },\n  tint: {\n    color: brandColor1Tint,\n    hoverColor: brandColor1\n  },\n  white: {\n    color: white,\n    hoverColor: gray2\n  }\n};\n\nconst InlineLink = styled.a`\n  display: ${(props) => props.display ?? \"inline\"};\n  text-decoration: ${(props) => (props.$underlined ? \"underlined\" : \"none\")};\n  font-weight: ${(props) => (props.$bold ? 600 : 300)};\n  color: ${(props) => VARIANTS[props.variant].color};\n  transition: color 0.2s;\n\n  svg {\n    margin-left: 16px;\n  }\n\n  &:hover {\n    cursor: pointer;\n    color: ${(props) => VARIANTS[props.variant].hoverColor};\n  }\n`;\n\nconst CTALink = ({\n  attrs,\n  display,\n  variant = \"shade\",\n  children,\n  bold = false,\n  underlined = false\n}) => {\n  const tag = attrs && attrs.to ? Link : \"a\";\n\n  return (\n    <InlineLink\n      display={display}\n      as={tag}\n      variant={variant}\n      $bold={bold}\n      $underlined={underlined}\n      {...attrs}\n    >\n      {children}\n    </InlineLink>\n  );\n};\n\nexport default CTALink;\n"],"sourceRoot":""}