{"version":3,"sources":["webpack:///./src/components/MetricSnippet.js","webpack:///./src/images/31-native-ads-mobile.png","webpack:///./src/components/brands/StackAdsBrands.js","webpack:///./src/components/StackEmailAnimation.js","webpack:///./src/components/HeroTestimonial.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/animations.js","webpack:///./src/components/HeroMetricsThree.js","webpack:///./src/components/styles/CTALink.js","webpack:///./src/images/33-sponsored-content-desktop.png","webpack:///./src/images/11-icon-quotes.svg","webpack:///./src/components/icons/IconDownload.js","webpack:///./src/components/StorySnippet.js","webpack:///./src/components/HeroStories.js","webpack:///./src/components/brands/StackMediaStories.js","webpack:///./src/components/AudienceSnippet.js","webpack:///./src/components/brands/OurCoreAudiences.js","webpack:///./src/components/sections/BrandsStackMediaDefer.js","webpack:///./src/images/33-sponsored-content-mobile.png"],"names":["Div","styled","div","props","theme","width","align","active","white","gray1","Numbers","Headline100","easingFn","t","b","c","d","ts","MetricSnippet","PureComponent","constructor","super","this","observerRef","createRef","state","observer","play","componentDidMount","initPositionObserver","componentWillUnmount","disconnect","self","IntersectionObserver","entries","i","length","isIntersecting","intersectionRatio","startAnimation","setState","threshold","observe","current","number","prefix","suffix","start","options","startVal","duration","animation","CountUp","error","render","description","ref","as","style","display","color","margins","dangerouslySetInnerHTML","__html","module","exports","Background","black1","mediaMedium","Item","order","Grid","mediaDesktop","StackMediaBrandsSection","data","Object","keys","map","item","key","component","MoveInBottom","fluid","childImageSharp","StackMediaBrands","useStaticQuery","StackEmailAnimation","forceActive","images","Box","Reverse","Image","Wrapper","BackgroundImage","HeroTestimonial","author","media","children","sources","mobileTestimonial","desktopTestimonial","alt","src","iconQuotes","height","logoTestimonial","Mobile","Desktop","Container","Trigger","Threshold","SponsorContentAnimation","size","setSize","useState","Math","max","document","documentElement","clientWidth","window","innerWidth","useEffect","debouncedHandleResize","debounce","addEventListener","passive","removeEventListener","inView","useInView","delay","triggerOnce","FadeSlideInTopRight","keyframes","SlideInRight","FadeSlideInRight","SlideInLeft","SlideInBottom","SlideInTop","FlyBy","WobbleFrames","FadeInBottomFrames","translateFrom","FadeInBottom","css","FadeInRight","FadeInLeft","FadeIn","FadeInRightSmall","FadeInLeftSmall","backgroundColor","noBackground","HeroMetricsThree","content","backgroundDesktop","backgroundMedia","VARIANTS","shade","brandColor1Shade","hoverColor","brandColor1","tint","brandColor1Tint","gray2","InlineLink","a","$underlined","$bold","variant","CTALink","attrs","bold","underlined","tag","to","Link","IconDownload","xmlns","fill","fillRule","Top","Bottom","inject","title","image","topic","link","Eyebrows","download","href","gray4","Title","Headline64","StackMediaStories","HeroStories","Content","Display","Text","Body20","Headline40","AudienceSnippet","imageAltText","TitleRow","OurCoreAudiencesSection","OurCoreAudiences","sponsoredContentImages","desktop","sponsoredDesktop","mobile","sponsoredMobile","stackBarImages","stackBarDesktop","stackBarMobile","nativeAdsImages","nativeAdDesktop","nativeAdMobile","BrandsStackMediaDefer","HeroSectionExtraHeading","heading","top","AnimationComponent","HeroSection","displayComponent","marginDesktop","paddingDesktop","reverse","imageTop","overflowWidth","brandColor2","HeroBlueCTA","outline","linkLabel","from"],"mappings":"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","file":"components-sections-BrandsStackMediaDefer-3f5b9b4ad498edb43398.js","sourcesContent":["import React, { createRef, PureComponent } from \"react\";\nimport { Headline100 } from \"./styles/Headings\";\nimport { gray1, white } from \"./styles/Colors\";\nimport { Body20 } from \"./styles/BodyTypes\";\nimport styled from \"styled-components\";\nimport { CountUp } from \"countup.js\";\n\nconst Div = styled.div`\n  width: ${(props) => props.theme.width ?? \"425px\"};\n  max-width: 100%;\n  margin: 16px 0 0;\n  text-align: ${(props) => (props.align ? \"center\" : \"\")};\n  transition: ${(props) => (props.active ? \"1.9s\" : \"0s\")} ease-in color;\n  color: ${(props) => (props.active ? white : gray1)};\n`;\n\nconst Numbers = styled(Headline100)`\n  transition: ${(props) => (props.active ? \"1.9s\" : \"0s\")} ease-in color;\n  color: ${(props) => (props.active ? white : gray1)};\n`;\n\nconst easingFn = function (t, b, c, d) {\n  let ts = (t /= d) * t;\n  let tc = ts * t;\n  return b + c * (tc + -3 * ts + 3 * t);\n};\n\nclass MetricSnippet extends PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.observerRef = createRef();\n\n    this.state = {\n      observer: null,\n      play: false\n    };\n  }\n\n  componentDidMount() {\n    this.initPositionObserver();\n  }\n\n  componentWillUnmount() {\n    if (this.state.observer) {\n      this.state.observer.disconnect();\n    }\n  }\n\n  initPositionObserver() {\n    const self = this;\n    const intersectionCallback = (entries) => {\n      for (let i = 0; i < entries.length; i++) {\n        if (entries[i].isIntersecting && entries[i].intersectionRatio > 0.5) {\n          if (!self.state.play) {\n            self.startAnimation();\n            this.state.observer.disconnect();\n            this.setState({ observer: null });\n          }\n        }\n      }\n    };\n\n    // Create the observer.\n    const observer = new IntersectionObserver(intersectionCallback, {\n      threshold: 1\n    });\n    observer.observe(this.observerRef.current);\n    this.setState({ observer });\n  }\n\n  startAnimation() {\n    const { number, prefix, suffix, start = 1 } = this.props;\n\n    const options = {\n      easingFn,\n      startVal: start,\n      duration: 2,\n      prefix: prefix ?? \"\",\n      suffix: suffix ?? \"\"\n    };\n\n    this.setState({ play: true });\n\n    const animation = new CountUp(this.observerRef.current, number, options);\n    if (!animation.error) {\n      animation.start();\n    }\n  }\n\n  render() {\n    const { description, number, prefix, suffix, align, theme } = this.props;\n\n    return (\n      <>\n        <Numbers active={this.state.play} ref={this.observerRef} as=\"span\">\n          <span style={{ display: \"none\" }}>\n            {prefix ?? \"\"}\n            {number}\n            {suffix ?? \"\"}\n          </span>\n        </Numbers>\n        <Div active={this.state.play} align={align} theme={theme}>\n          <Body20\n            theme={{ color: \"inherit\", margins: \"0\" }}\n            dangerouslySetInnerHTML={{ __html: description }}\n          />\n        </Div>\n      </>\n    );\n  }\n}\n\nexport default MetricSnippet;\n","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 { Body20 } from \"./styles/BodyTypes\";\nimport Image from \"./Image\";\nimport Container from \"./styles/Container\";\nimport { white } from \"./styles/Colors\";\nimport { mediaMedium } from \"./styles/variables\";\nimport iconQuotes from \"../images/11-icon-quotes.svg\";\nimport BackgroundImage from \"gatsby-background-image\";\n\nconst Box = styled.div`\n  max-width: 590px;\n  position: relative;\n  z-index: 2;\n`;\n\nconst Reverse = styled(Image)`\n  transform: rotate(180deg);\n`;\n\nconst Wrapper = styled(BackgroundImage)`\n  padding: 95px 0 89px;\n  overflow: hidden;\n  position: relative;\n  background: #d3d0de;\n\n  &:before,\n  &:after {\n    background-repeat: no-repeat !important;\n    background-position: center center !important;\n    background-size: cover !important;\n  }\n\n  @media (${mediaMedium}) {\n    padding: 160px 0 153px;\n  }\n`;\n\nconst HeroTestimonial = ({ author, media, children }) => {\n  const sources = media.mobileTestimonial\n    ? [\n        media.mobileTestimonial.childImageSharp.fluid,\n        {\n          ...media.desktopTestimonial.childImageSharp.fluid,\n          media: `(${mediaMedium})`\n        }\n      ]\n    : [media.desktopTestimonial.childImageSharp.fluid];\n\n  return (\n    <Wrapper fluid={sources}>\n      <Container>\n        <Box>\n          <Image\n            alt=\"opening quotation mark\"\n            src={iconQuotes}\n            width={45}\n            height={34}\n          />\n          {children}\n          <Reverse\n            alt=\"closing quotation mark\"\n            src={iconQuotes}\n            width={45}\n            height={34}\n          />\n          <Body20 theme={{ margins: \"40px 0 22px\", color: white }}>\n            {author}\n          </Body20>\n          <Image fluid={media.logoTestimonial.childImageSharp.fluid} />\n        </Box>\n      </Container>\n    </Wrapper>\n  );\n};\n\nexport default HeroTestimonial;\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 styled, { keyframes, css } from \"styled-components\";\n\nexport const FadeSlideInTopRight = keyframes`\n  0% {\n    transform: translateY(-20%) translateX(20%);\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    transform: translateY(0) translateX(0);\n    opacity: 1;\n  }\n`;\n\nexport const SlideInRight = keyframes`\n  0% {\n    transform: translateX(30%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n`;\n\nexport const FadeSlideInRight = keyframes`\n  0% {\n    transform: translateX(30%);\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    transform: translateX(0);\n    opacity: 1;\n  }\n`;\n\nexport const SlideInLeft = keyframes`\n  0% {\n    transform: translateX(-30%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n`;\n\nexport const SlideInBottom = keyframes`\n  0% {\n    transform: translateY(20%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n`;\n\nexport const SlideInTop = keyframes`\n  0% {\n    transform: translateY(-20%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n`;\n\nexport const FlyBy = keyframes`\n  0% {\n    transform: translateY(20%) translateX(-20%);\n  }\n  100% {\n    transform: translateY(0) translateX(0);\n  }\n`;\n\nexport const FadeInFrames = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(40%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const WobbleFrames = keyframes`\n  0% {\n    -webkit-transform: none;\n    transform: none\n  }\n  15% {\n    transform: translate3d(0, -15%, 0);\n  }\n  30% {\n    transform: translate3d(0, 10%, 0);\n  }\n  45% {\n    transform: translate3d(0, -15%, 0);\n  }\n  60% {\n    transform: translate3d(0, 0%, 0);\n  }\n  75% {\n    transform: translate3d(0, -15%, 0);\n  }\n  100% {\n    transform: none\n  }\n`;\n\nexport const FadeInBottomFrames = keyframes`\n  0% {\n    transform: translateY(20%);\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n`;\n\nexport const MoveInBottom = styled.div`\n  transition: ease 0.8s;\n  transition-property: transform;\n  transform: translateY(\n    ${(props) => (props.active ? 0 : props.translateFrom ?? 20)}%\n  );\n  transition-delay: ${(props) => (props.active ? 0 : 1)}s;\n`;\n\nexport const FadeInBottom = styled.div`\n  transform: translateY(20%);\n  opacity: 0;\n  animation: ${(props) =>\n    props.active\n      ? css`\n          ${FadeInBottomFrames} 0.8s ease forwards 0.1s\n        `\n      : \"none\"};\n`;\n\nexport const FadeInRight = styled.div`\n  transition: ease 0.8s;\n  transition-property: transform;\n  transition-delay: ${(props) => (props.active ? 0 : 1)}s;\n  transform: translateX(${(props) => (props.active ? 0 : 20)}%);\n`;\n\nexport const FadeInLeft = styled.div`\n  transition: ease 0.8s;\n  transition-property: transform, opacity;\n  transition-delay: ${(props) => (props.active ? 0 : 1)}s;\n  transform: translateX(${(props) => (props.active ? 0 : -70)}%);\n  opacity: ${(props) => (props.active ? 1 : 0)};\n`;\n\nexport const FadeIn = styled.div`\n  transition: ease 0.8s;\n  transition-property: opacity;\n  transition-delay: ${(props) => (props.active ? 0 : 1)}s;\n  opacity: ${(props) => (props.active ? 1 : 0)};\n`;\n\nexport const FadeInSmall = styled(FadeInBottom)`\n  transform: translateY(${(props) => (props.active ? 0 : 20)}%);\n`;\n\nexport const FadeInRightSmall = styled(FadeInRight)`\n  transform: translateX(${(props) => (props.active ? 0 : 50)}%);\n`;\n\nexport const FadeInLeftSmall = styled.div`\n  transition: ease 0.8s;\n  transition-property: transform, opacity;\n  transition-delay: ${(props) => (props.active ? 0 : 1)}s;\n  transform: translateX(${(props) => (props.active ? 0 : -20)}%);\n  opacity: ${(props) => (props.active ? 1 : 0)};\n`;","import React from \"react\";\nimport styled from \"styled-components\";\nimport Container from \"./styles/Container\";\nimport { black1 } from \"./styles/Colors\";\nimport { mediaMedium } from \"./styles/variables\";\nimport MetricSnippet from \"./MetricSnippet\";\nimport BackgroundImage from \"gatsby-background-image\";\n\nconst Wrapper = styled(Container)`\n  justify-content: center;\n  align-items: flex-start;\n  overflow: hidden;\n  text-align: center;\n  grid-template-columns: 100%;\n  display: grid;\n  grid-row-gap: 60px;\n\n  @media (${mediaMedium}) {\n    grid-template-columns: repeat(3, 1fr);\n    grid-column-gap: 28px;\n  }\n`;\n\nconst Background = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  background-color: ${(props) => props.backgroundColor ?? black1};\n  height: auto;\n  padding: 87px 16px;\n\n  &:after,\n  &:before {\n    background-position: bottom center !important;\n    background-repeat: no-repeat !important;\n    background-size: ${(props) =>\n      props.noBackground ? \"100% auto\" : \"140% auto\"} !important;\n  }\n\n  @media (${mediaMedium}) {\n    padding: 0;\n    height: 560px;\n\n    &:after,\n    &:before {\n      background-size: contain !important;\n    }\n  }\n`;\n\nconst Item = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  max-width: 280px;\n  margin: 0 auto;\n`;\n\nconst HeroMetricsThree = ({\n  content,\n  noBackground,\n  backgroundDesktop,\n  backgroundMedia,\n  backgroundColor\n}) => {\n  let sources = null;\n\n  if (backgroundDesktop && backgroundMedia) {\n    sources = [\n      backgroundMedia.childImageSharp.fluid,\n      {\n        ...backgroundDesktop.childImageSharp.fluid,\n        media: `(${mediaMedium})`\n      }\n    ];\n  }\n\n  return (\n    <Background\n      as={noBackground ? \"div\" : BackgroundImage}\n      fluid={sources}\n      noBackground={noBackground}\n      backgroundColor={backgroundColor}\n    >\n      <Wrapper>\n        {content.map((item, key) => (\n          <Item key={\"ms\" + key}>\n            <MetricSnippet align={true} {...item} />\n          </Item>\n        ))}\n      </Wrapper>\n    </Background>\n  );\n};\n\nexport default HeroMetricsThree;\n","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","module.exports = __webpack_public_path__ + \"static/33-sponsored-content-desktop-dc600c229b377db6fe6bd18197fe067d.png\";","module.exports = \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NiAzNCI+CiAgPGRlZnMvPgogIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICA8ZyBmaWxsPSIjRkZDOTAwIj4KICAgICAgPGc+CiAgICAgICAgPHBhdGggZD0iTTEyLjE4IDBsNy4xIDUuNzVjLTMuMSAxLjM2LTcuNTkgNS42NS04Ljg2IDkuMzUuNS0uMiAxLjQ3LS4zOSAyLjU0LS4zOSA0LjY3IDAgOC40NyAzLjYgOC40NyA5LjA2QzIxLjQzIDI5LjQyIDE2Ljc2IDM0IDExLjMgMzQgNS4zNiAzNCAwIDI5LjQyIDAgMjEuNDMgMCAxMi44NiA0LjU4IDUuMzYgMTIuMTggMHptMjQuMDYgMGw3LjExIDUuNzVjLTMuMTIgMS4zNi03LjYgNS42NS04Ljg2IDkuMzUuNDgtLjIgMS40Ni0uMzkgMi41My0uMzkgNC42OCAwIDguNDggMy42IDguNDggOS4wNkM0NS41IDI5LjQyIDQwLjgyIDM0IDM1LjM2IDM0Yy01Ljk0IDAtMTEuMy00LjU4LTExLjMtMTIuNTcgMC04LjU3IDQuNTgtMTYuMDcgMTIuMTgtMjEuNDN6Ii8+CiAgICAgIDwvZz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=\"","import React from \"react\";\n\nconst IconDownload = () => {\n  return (\n    <svg width=\"13\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\">\n      <g fill=\"none\" fillRule=\"evenodd\">\n        <path d=\"M0-1h24v24H0z\" />\n        <path\n          d=\"M1.52 14.55v3.79h9.96v-3.8H13V20H0v-5.45h1.52zM6.84 0v11.58l3.1-3.14.24-.23.86.87.23.23-.23.23-4.75 4.78-.22.23-.23-.23-4.75-4.78-.22-.23.23-.23.86-.87.22.23 3.12 3.14V0h1.54z\"\n          fill=\"currentColor\"\n        />\n      </g>\n    </svg>\n  );\n};\n\nexport default IconDownload;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport BackgroundImage from \"gatsby-background-image\";\nimport { Eyebrows16 } from \"./styles/Eyebrows\";\nimport { Headline32 } from \"./styles/Headings\";\nimport { black1, gray2, white } from \"./styles/Colors\";\nimport { Body20 } from \"./styles/BodyTypes\";\nimport IconDownload from \"./icons/IconDownload\";\nimport { inject, observer } from \"mobx-react\";\nimport { mediaMedium } from \"./styles/variables\";\n\nconst Div = styled(BackgroundImage)`\n  width: 100%;\n  height: 580px;\n  max-width: 348px;\n  margin: 0 auto;\n  position: relative;\n  overflow: hidden;\n  background-color: ${black1};\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 32px 34px;\n\n  @media (${mediaMedium}) {\n    padding: 32px 22px;\n  }\n`;\n\nconst Top = styled.div`\n  position: relative;\n  z-index: 2;\n`;\n\nconst Bottom = styled.div`\n  position: relative;\n  z-index: 2;\n`;\n\nconst Link = styled.a`\n  display: inline-flex;\n  align-items: center;\n  margin: 0;\n  text-decoration: none;\n  color: ${white};\n  transition: color 0.2s;\n\n  svg {\n    margin-left: 16px;\n  }\n\n  &:hover {\n    cursor: pointer;\n    color: ${gray2};\n  }\n`;\n\nconst StorySnippet = ({ title, image, topic, link }) => {\n  return (\n    <Div fluid={image}>\n      <Top>\n        <Eyebrows16 theme={{ color: white }}>{topic}</Eyebrows16>\n      </Top>\n      <Bottom>\n        <Headline32 as=\"h4\" theme={{ margins: \"0 0 22px\", color: white }}>\n          {title}\n        </Headline32>\n        <Body20 as=\"span\" theme={{ margins: \"0\" }}>\n          <Link download href={link}>\n            Get the Story\n            <IconDownload />\n          </Link>\n        </Body20>\n      </Bottom>\n    </Div>\n  );\n};\n\nexport default inject([\"store\"])(observer(StorySnippet));\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Container from \"./styles/Container\";\nimport StorySnippet from \"./StorySnippet\";\nimport { mediaMedium } from \"./styles/variables\";\nimport { gray4 } from \"./styles/Colors\";\nimport { Headline64 } from \"./styles/Headings\";\nimport { inject, observer } from \"mobx-react\";\n\nconst Background = styled.div`\n  background-color: ${(props) => props.backgroundColor ?? gray4};\n  padding: 92px 0 96px;\n\n  @media (${mediaMedium}) {\n    padding: 152px 0 160px;\n  }\n`;\n\nconst Grid = styled.div`\n  display: grid;\n  grid-template-columns: 100%;\n  grid-gap: 16px;\n  margin-top: 80px;\n\n  @media (${mediaMedium}) {\n    margin-top: 89px;\n    grid-template-columns: repeat(3, 1fr);\n    grid-gap: 24px;\n  }\n`;\n\nconst Title = styled(Headline64)`\n  text-align: center;\n`;\n\nconst HeroStories = ({ color, data, images, backgroundColor }) => {\n  return (\n    <Background backgroundColor={backgroundColor}>\n      <Container>\n        <Title theme={{ color: color ?? null }}>SUCCESS STORIES</Title>\n        <Grid>\n          {data.map((item, key) => (\n            <StorySnippet\n              key={\"success-story-\" + key}\n              image={images[\"image\" + key].childImageSharp.fluid}\n              {...item}\n            />\n          ))}\n        </Grid>\n      </Container>\n\n      {/*{ui.caseStudyLeadOpen !== \"\" && <CaseStudyLead />}*/}\n    </Background>\n  );\n};\n\nexport default inject([\"store\"])(observer(HeroStories));\n","import React from \"react\";\nimport { graphql, useStaticQuery } from \"gatsby\";\nimport HeroStories from \"../HeroStories\";\nimport { white } from \"../styles/Colors\";\n\nconst data = [\n  {\n    title: \"Lemonade gains 5k+ leads in one year\",\n    topic: \"consumer insurance\",\n    link: \"/slides/StackMedia_Case_Study_Lemonade.pdf\"\n  },\n  {\n    title: \"DiversyFund goes viral in Google Stories\",\n    topic: \"consumer investing\",\n    link: \"/slides/StackMedia_Case_Study_DiversyFund.pdf\"\n  },\n  {\n    title: \"TikTok featured 20+ times in 10 days\",\n    topic: \"consumer apps\",\n    link: \"/slides/StackMedia_Case_Study_TikTok.pdf\"\n  }\n];\n\nconst StackMediaStories = () => {\n  const images = useStaticQuery(graphql`\n    query {\n      image0: file(relativePath: { eq: \"66-success-story-consumer-apps.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 360, maxHeight: 548, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      image1: file(\n        relativePath: { eq: \"66-success-story-consumer-investing.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 360, maxHeight: 548, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      image2: file(\n        relativePath: { eq: \"66-success-story-consumer-insurance.png\" }\n      ) {\n        childImageSharp {\n          fluid(maxWidth: 360, maxHeight: 548, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n    }\n  `);\n  return <HeroStories backgroundColor={white} data={data} images={images} />;\n};\n\nexport default StackMediaStories;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Container from \"./styles/Container\";\nimport Image from \"./Image\";\nimport { Headline40 } from \"./styles/Headings\";\nimport { Body20 } from \"./styles/BodyTypes\";\nimport { mediaMedium } from \"./styles/variables\";\nimport { black1, white } from \"./styles/Colors\";\n\nconst Wrapper = styled.div`\n  background-color: ${black1};\n`;\n\nconst Grid = styled(Container)`\n  display: grid;\n\n  @media (${mediaMedium}) {\n    grid-template-columns: calc(100% * 6 / 12) calc(100% * 5 / 12);\n    grid-gap: calc(100% * 1 / 12);\n  }\n`;\n\nconst Content = styled.div`\n  padding-top: 45px;\n\n  @media (${mediaMedium}) {\n    order: 1;\n    padding-top: 52px;\n    padding-bottom: 60px;\n  }\n`;\n\nconst Display = styled.div`\n  order: 3;\n  margin: 0 0 -110px auto;\n  transform: translateX(50px);\n\n  @media (${mediaMedium}) {\n    display: flex;\n    flex-direction: column;\n    align-self: flex-end;\n    order: 1;\n    margin: -105px 0 0 auto;\n    transform: none;\n  }\n`;\n\nconst Background = styled.div`\n  padding-top: 17px;\n  overflow: hidden;\n\n  &:nth-of-type(3) {\n    ${Display} {\n      transform: translateX(100px);\n    }\n  }\n\n  @media (${mediaMedium}) {\n    padding-top: 120px;\n\n    &:nth-of-type(odd) {\n      ${Display} {\n        margin: -110px auto 0 0;\n        order: 4;\n      }\n    }\n\n    &:nth-of-type(2) {\n      ${Display} {\n        transform: none;\n      }\n    }\n  }\n`;\n\nconst Text = styled(Body20)`\n  margin: 20px 0;\n  color: ${white};\n\n  &:last-child {\n    margin-top: -3px;\n  }\n\n  @media (${mediaMedium}) {\n    margin: 20px 0;\n  }\n`;\n\nconst Title = styled(Headline40)`\n  margin: 32px 0 0;\n  color: ${white};\n\n  @media (${mediaMedium}) {\n    margin: 32px 0;\n  }\n`;\n\nconst AudienceSnippet = ({ image, title, content, description, imageAltText }) => {\n  return (\n    <Background>\n      <Wrapper>\n        <Grid>\n          <Display>\n            <Image alt={imageAltText} {...image} />\n          </Display>\n          <Content>\n            <Title dangerouslySetInnerHTML={{ __html: title }} />\n            <Text>{description}</Text>\n            <Text>{content}</Text>\n          </Content>\n        </Grid>\n      </Wrapper>\n    </Background>\n  );\n};\n\nexport default AudienceSnippet;\n","import React from \"react\";\nimport { graphql, useStaticQuery } from \"gatsby\";\nimport styled from \"styled-components\";\nimport Container from \"../styles/Container\";\nimport { Headline80 } from \"../styles/Headings\";\nimport { mediaMedium } from \"../styles/variables\";\nimport AudienceSnippet from \"../AudienceSnippet\";\n\nconst Wrapper = styled.div`\n  padding-top: 96px;\n\n  @media (${mediaMedium}) {\n    padding-top: 144px;\n  }\n`;\n\nconst TitleRow = styled(Container)`\n  text-align: center;\n  margin-bottom: 16px;\n`;\n\nconst data = [\n  {\n    title: \"Chloe, <br/> The entrepreneur\",\n    description: \"31  •  Lives in Vancouver  •  $200k income\",\n    imageAltText: \"A short-haired woman smiling with her eyes closed, wearing a yellow dress, with her hand on her face.\",\n    content:\n      \"Motivated to grow her business’ revenue without hiring, be more successful without going over budget, please her investors, and be the first to know about the newest business tools and trends.\"\n  },\n  {\n    title: \"Adriana, <br/> The coder\",\n    description: \"28  •  Lives in Austin  •  $150k income\",\n    imageAltText: \"A long-haired woman with glasses, wearing a striped salmon sweater.\",\n    content:\n      \"Motivated to become a VP-level engineer with in-demand, high-paid skills, and to work to creatively to solve difficult problems.\"\n  },\n  {\n    title: \"Jake, <br/> The freelance designer\",\n    description: \"26  •  Lives in Chicago  •  $65k income\",\n    imageAltText: \"A man with glasses wearing a green shirt, sweater and a leather bag.\",\n    content:\n      \"Motivated by storytelling through graphics, landing new clients, getting consistent work.\"\n  },\n  {\n    title: \"Owen, <br/> The digital marketer\",\n    description: \"35  •  Lives in Charlotte  •  $90k income\",\n    imageAltText: \"A bearded man wearing a blue t-shirt.\",\n    content:\n      \"Motivated by being the first to know about the latest health and fitness finds, looking his best, growing his social media following, and living a “greener” life. \"\n  },\n  {\n    title: \"Chris, <br/> The executive\",\n    description: \"36  •  Lives in San Francisco  •  $180k income\",\n    imageAltText: \"A bearded man wearing a gray business suit.\",\n    content:\n      \"Motivated by being a top performer, earning a bonus, completing products on-time and on-budget.\"\n  }\n];\n\nconst OurCoreAudiencesSection = ({ images }) => {\n  return (\n    <Wrapper>\n      <TitleRow>\n        <Headline80 as=\"h3\">\n          Our Core <br /> Audiences\n        </Headline80>\n      </TitleRow>\n      {data.map((item, key) => (\n        <AudienceSnippet\n          key={\"success-story-\" + key}\n          image={images[\"image\" + key].childImageSharp.fluid}\n          {...item}\n        />\n      ))}\n    </Wrapper>\n  );\n};\n\nconst OurCoreAudiences = () => {\n  const images = useStaticQuery(graphql`\n    query {\n      image0: file(relativePath: { eq: \"69-woman-1.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 362, maxHeight: 558, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      image1: file(relativePath: { eq: \"69-woman-2.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 468, maxHeight: 534, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      image2: file(relativePath: { eq: \"69-man-3.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 456, maxHeight: 523, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      image3: file(relativePath: { eq: \"69-man-2.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 329, maxHeight: 491, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      image4: file(relativePath: { eq: \"69-man-4.png\" }) {\n        childImageSharp {\n          fluid(maxWidth: 421, maxHeight: 489, quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n    }\n  `);\n  return <OurCoreAudiencesSection images={images} />;\n};\n\nexport default OurCoreAudiences;\n","import React from \"react\";\nimport { graphql, Link, useStaticQuery } from \"gatsby\";\nimport StackMediaStories from \"../brands/StackMediaStories\";\nimport StackMediaBrands from \"../brands/StackAdsBrands\";\nimport HeroSectionExtraHeading from \"../HeroSectionExtraHeading\";\nimport CTALink from \"../styles/CTALink\";\nimport HeroSection from \"../HeroSection\";\nimport HeroMetricsThree from \"../HeroMetricsThree\";\nimport { brandColor2, white } from \"../styles/Colors\";\nimport HeroTestimonial from \"../HeroTestimonial\";\nimport { Headline32 } from \"../styles/Headings\";\nimport OurCoreAudiences from \"../brands/OurCoreAudiences\";\nimport HeroBlueCTA from \"../HeroBlueCTA\";\nimport { FadeInRightSmall } from \"../styles/animations\";\nimport SponsorContentAnimation from \"../SponsorContentAnimation\";\nimport StackEmailAnimation from \"../StackEmailAnimation\";\n\n// Images\nimport sponsoredDesktop from \"../../images/33-sponsored-content-desktop.png\";\nimport sponsoredMobile from \"../../images/33-sponsored-content-mobile.png\";\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 sponsoredContentImages = {\n  desktop: {\n    src: sponsoredDesktop,\n    width: 1299,\n    height: 1628\n  },\n  mobile: {\n    src: sponsoredMobile,\n    width: 375,\n    height: 404\n  }\n};\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 BrandsStackMediaDefer = () => {\n  const images = useStaticQuery(graphql`\n    query {\n      logoTestimonial: file(\n        relativePath: { eq: \"66-testimonial-vincero.png\" }\n      ) {\n        childImageSharp {\n          fluid(quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      desktopTestimonial: file(\n        relativePath: { eq: \"67-testimonial-brandads-desktop.png\" }\n      ) {\n        childImageSharp {\n          fluid(quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n      mobileTestimonial: file(\n        relativePath: { eq: \"67-testimonial-brandads-media.png\" }\n      ) {\n        childImageSharp {\n          fluid(quality: 100) {\n            ...GatsbyImageSharpFluid_withWebp\n            ...GatsbyImageSharpFluidLimitPresentationSize\n          }\n        }\n      }\n    }\n  `);\n\n  return (\n    <>\n      <StackMediaStories />\n\n      <StackMediaBrands />\n\n      <HeroSectionExtraHeading\n        heading=\"YOUR STACKMEDIA TOOLKIT\"\n        top=\"01\"\n        title=\"SPONSORED CONTENT\"\n        images={sponsoredContentImages}\n        AnimationComponent={SponsorContentAnimation}\n      >\n        Get discovered through unique sponsored content written by Stack’s{\" \"}\n        <CTALink\n          attrs={{ to: \"/publishers/content-studio/\" }}\n          variant=\"white\"\n          bold\n          underlined\n        >\n          Content Studio\n        </CTALink>{\" \"}\n        and published on top media sites. We quickly scale your content strategy\n        for you, no additional contracts required.\n      </HeroSectionExtraHeading>\n\n      <HeroSection\n        title=\"EMAIL NEWSLETTERS\"\n        top=\"02\"\n        displayComponent={<StackEmailAnimation forceActive={true} />}\n        theme={{\n          marginDesktop: \"0 0 60px\",\n          paddingDesktop: \"200px 0\"\n        }}\n        reverse={true}\n      >\n        Land in the inboxes of hard-to-reach customers with inclusions in emails\n        sent to millions of subscribers.\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 on our top partner sites — so\n        you’ll never lose out to ad blockers.\n      </HeroSection>\n\n      <HeroSection title=\"STACKBAR\" top=\"04\" images={stackBarImages}>\n        Feature your brand with a premium placement and strong call-to-action at\n        the top of highly-trafficked publishers throughout our network.\n      </HeroSection>\n\n      <HeroMetricsThree\n        noBackground={true}\n        backgroundColor={brandColor2}\n        content={[\n          {\n            number: \"180\",\n            suffix: \"M+\",\n            description: \"Total Reach\"\n          },\n          {\n            number: \"26\",\n            suffix: \"%\",\n            description: \"Avg CTR from Content <br/> to Product\"\n          },\n          {\n            number: \"700\",\n            suffix: \"+\",\n            description: \"Publishers in Our Network\"\n          }\n        ]}\n      />\n\n      <HeroTestimonial media={images} author=\"Vincero Watches\">\n        <Headline32 theme={{ margins: \"18px 0\", color: white }}>\n          The biggest hurdle of PR is simply getting the attention of the\n          publication’s decision maker. Stack solves that problem through their\n          existing relationships with hundreds of publishers.\n        </Headline32>\n        <Headline32 theme={{ margins: \"18px 0\", color: white }}>\n          Stack’s team handled everything from excellent writing, CPC\n          negotiations with publishers, and placement, all in much less time\n          than it would have taken us from scratch.\n        </Headline32>\n      </HeroTestimonial>\n\n      <OurCoreAudiences />\n\n      <HeroBlueCTA\n        title=\"GET REAL RESULTS\"\n        outline=\"WITH STACK\"\n        description=\"See how StackMedia can help you reach your target audiences on the sites they visit daily.\"\n        linkLabel=\"Get Started\"\n        link={{ to: \"/contact/?smopt=brand\", state: { from: \"brand\" }, as: Link }}\n      />\n    </>\n  );\n};\n\nexport default BrandsStackMediaDefer;\n","module.exports = __webpack_public_path__ + \"static/33-sponsored-content-mobile-b83ad5570cc54620019b6c85cee1c43a.png\";"],"sourceRoot":""}