{"version":3,"sources":["webpack:///./src/components/ImageContainer.tsx","webpack:///./src/proPages/insights.tsx","webpack:///./src/components/FeatureSection.tsx","webpack:///./src/components/ContentBlock.tsx"],"names":["StyledImage","styled","Img","props","isBgImg","ImageMobile","bp","mobileMax","ImageTablet","tabletMin","tabletMax","ImageDesktop","desktopMin","ImageSet","data","mobileFluid","tabletFluid","desktopFluid","fluid","StyledSingleColumnContainer","SingleColumnContainer","Container","div","BgImagContainer","limitHeight","FloatImgContainer","ImageContainer","mobileBackgroundImage","tabletBackgroundImage","desktopBackgroundImage","mobileFloatingImage","tabletFloatingImage","desktopFloatingImage","borderRadius","showOnlyBgImage","leftSpanDesk","rightSpanDesk","leftSpanTab","rightSpanTab","ArticleCard","colors","white","InsightsPage","page","components","sections","map","section","index","internal","type","hero","key","heightMobile","level","size","content","heading","paragraphSection","marginBottomTab","marginBottom","className","isLarge","ignorePadding","features","heightTablet","contentBlock","proVersion","description","buttonsGroup","backgroundImageDesktop","backgroundImageTablet","backgroundImageMobile","contentTheme","contentPositionMobile","contentPositionDesktop","showAllButtonsDesktop","showAllButtonsMobile","contentBackground","mainHeroBlock","title","metadata","pageQuery","FeatureContainer","RoundedContainer","breakpoints","StyledParagraph","Paragraph","dark","FeatureSection","feature","featureIndex","alignLeft","isSemiLarge","ContentDescription","Column","SingleButton","Button","ButtonsList","ContentContainerInner","bgStyles","css","lightContentStyles","onlyShowFirstButtonStyle","multipleButtonsStyleMobile","multipleButtonsStyleDesktop","contentLeftDesktop","contentRightDesktop","contentAlignCenterMobileStyles","ContentContainer","enableBackgroundColor","contentAlignCenterMobile","wideContentColumn","ImageBackgroundColumn","ContentBlockContainer","extraMarginTop","ContentBlock","ignoreMarginBottom","pro","cta","onClick","navigate","url","data-gtm-cta","gtm"],"mappings":"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","file":"component---src-pro-pages-insights-tsx-23c72d3f4d602775fed3.js","sourcesContent":["import React, { useState, useEffect } from \"react\"\nimport styled from \"styled-components\"\nimport { ContentfulAsset, ContentfulFluid } from \"../../types/graphql-types\"\nimport Img, { FluidObject } from \"gatsby-image\"\nimport colors from \"../utils/colors\"\nimport { breakpoints as bp, SingleColumnContainer, Column } from \"../components/layout\"\n\ninterface StylingProps {\n  isBgImg?: boolean\n}\n\ninterface ImageSetProps extends StylingProps {\n  mobileFluid: ContentfulFluid\n  tabletFluid?: ContentfulFluid\n  desktopFluid: ContentfulFluid\n}\n\nconst StyledImage = styled(Img)<StylingProps>`\n  ${props => (props.isBgImg ? `border_radius: unset;` : `border-radius: 16px;`)}\n  min-height: inherit;\n  max-height: inherit;\n`\n\nconst ImageMobile = styled(StyledImage)`\n  width: 100%;\n  display: none;\n  @media (max-width: ${bp.mobileMax}) {\n    display: block;\n    border: none;\n  }\n`\n\nconst ImageTablet = styled(StyledImage)`\n  width: 100%;\n  display: none;\n  @media (min-width: ${bp.tabletMin}) and (max-width: ${bp.tabletMax}) {\n    display: block;\n  }\n`\n\nconst ImageDesktop = styled(StyledImage)`\n  width: 100%;\n  display: none;\n  @media (min-width: ${bp.desktopMin}) {\n    display: block;\n  }\n`\n\nconst ImageSet = (data: ImageSetProps) => {\n  const { mobileFluid, tabletFluid, desktopFluid, isBgImg } = data\n  return (\n    <>\n      <ImageMobile isBgImg={isBgImg} fluid={mobileFluid as FluidObject} />\n      {tabletFluid && <ImageTablet isBgImg={isBgImg} fluid={tabletFluid as FluidObject} />}\n      <ImageDesktop isBgImg={isBgImg} fluid={desktopFluid as FluidObject} />\n    </>\n  )\n}\n\ninterface ImageContainerProps {\n  mobileBackgroundImage?: ContentfulAsset\n  tabletBackgroundImage?: ContentfulAsset\n  desktopBackgroundImage?: ContentfulAsset\n  mobileFloatingImage?: ContentfulAsset\n  tabletFloatingImage?: ContentfulAsset\n  desktopFloatingImage?: ContentfulAsset\n  borderRadius?: boolean\n  showOnlyBgImage?: boolean\n}\n\nconst StyledSingleColumnContainer = styled(SingleColumnContainer)`\n  padding: 0 !important;\n`\nconst Container = styled.div`\n  position: relative;\n  min-height: inherit;\n  max-height: inherit;\n`\n\ninterface BgImageContainerProps {\n  limitHeight: boolean\n}\n\nconst BgImagContainer = styled.div<BgImageContainerProps>`\n  position: relative;\n\n  ${props => props.limitHeight && \"max-height: 70vh;\"}\n\n  img {\n    position: relative;\n  }\n`\nconst FloatImgContainer = styled(StyledSingleColumnContainer)`\n  overflow: hidden;\n  position: absolute;\n  top: 10%;\n  left: 10%;\n  height: 100%;\n  width: 100%;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  @media (min-width: ${bp.tabletMin}) {\n    top: 56%;\n  }\n  @media (max-width: ${bp.mobileMax}) {\n    height: 80%;\n    width: 80%;\n  }\n`\n\nconst ImageContainer = (data: ImageContainerProps) => {\n  const {\n    mobileBackgroundImage,\n    tabletBackgroundImage,\n    desktopBackgroundImage,\n    mobileFloatingImage,\n    tabletFloatingImage,\n    desktopFloatingImage,\n    borderRadius = false,\n    showOnlyBgImage = false,\n  } = data\n\n  return (\n    <Container>\n      {mobileBackgroundImage && desktopBackgroundImage ? (\n        <>\n          <BgImagContainer limitHeight={showOnlyBgImage}>\n            <ImageSet\n              isBgImg={borderRadius}\n              mobileFluid={mobileBackgroundImage.fluid!}\n              tabletFluid={tabletBackgroundImage?.fluid!}\n              desktopFluid={desktopBackgroundImage.fluid!}\n            />\n          </BgImagContainer>\n\n          {mobileFloatingImage && desktopFloatingImage && (\n            <FloatImgContainer>\n              <Column leftSpanDesk={1} rightSpanDesk={1} leftSpanTab={1} rightSpanTab={1}>\n                <ImageSet\n                  mobileFluid={mobileFloatingImage.fluid!}\n                  tabletFluid={tabletFloatingImage?.fluid!}\n                  desktopFluid={desktopFloatingImage.fluid!}\n                />\n              </Column>\n            </FloatImgContainer>\n          )}\n        </>\n      ) : (\n        <ImageSet\n          isBgImg={borderRadius}\n          mobileFluid={mobileFloatingImage.fluid!}\n          tabletFluid={tabletFloatingImage?.fluid!}\n          desktopFluid={desktopFloatingImage?.fluid!}\n        />\n      )}\n    </Container>\n  )\n}\n\nexport default ImageContainer\n","import React, { Fragment } from \"react\"\nimport styled from \"styled-components\"\nimport { graphql } from \"gatsby\"\nimport ProPage from \"../components/ProPage\"\nimport ContentBlock from \"../components/ContentBlock\"\nimport {\n  Spacer,\n  SingleColumnContainer,\n  Column,\n  DualColumnContainer,\n  breakpoints as bp,\n} from \"../components/layout\"\nimport {\n  ContentfulContentBlock,\n  ContentfulFeature,\n  ContentfulFeatureSection,\n  ContentfulLink,\n  ContentfulParagraph,\n  ContentfulSimpleHero,\n  InsightsQuery,\n  ParagraphWithRemarkFragment,\n} from \"../../types/graphql-types\"\nimport FeatureSection from \"../components/FeatureSection\"\nimport Heading from \"../components/heading\"\nimport Paragraph from \"../components/paragraph\"\nimport colors from \"../utils/colors\"\nimport { NavSpacer } from \"../components/page\"\n\ninterface Props {\n  data: InsightsQuery\n}\n\nexport const ArticleCard = styled.div`\n  border: 2px solid #ececec;\n  border-radius: 16px;\n  background-color: ${colors.white};\n  box-shadow: 0 2px 63px -36px rgba(${colors.white}, 0.38);\n  height: 100%;\n  cursor: pointer;\n\n  .gatsby-image-wrapper {\n    max-height: 316px;\n    min-height: 316px;\n    border-radius: 14px;\n\n    @media (max-width: ${bp.mobileMax}) {\n      max-height: 181px;\n      min-height: 181px;\n    }\n  }\n`\n\nconst InsightsPage = ({ data }: Props) => {\n  const { page } = data\n\n  const components = page?.sections?.map((section, index) => {\n    switch (section?.internal?.type) {\n      case \"ContentfulSimpleHero\":\n        const hero = section as ContentfulSimpleHero\n        return (\n          <Fragment key={`contentful-simple-hero-${index}`}>\n            <Spacer heightMobile={0.5} />\n            <SingleColumnContainer>\n              <Column leftSpanDesk={2} rightSpanDesk={2} leftSpanTab={1} rightSpanTab={1}>\n                <Heading level=\"h1\" size=\"h1\" content={hero?.heading?.heading} />\n              </Column>\n            </SingleColumnContainer>\n          </Fragment>\n        )\n      case \"ContentfulParagraph\":\n        const paragraphSection = section as ContentfulParagraph\n        return (\n          <SingleColumnContainer key={`contentful-paragraph-${index}`}>\n            <Column\n              leftSpanDesk={2}\n              rightSpanDesk={2}\n              leftSpanTab={1}\n              rightSpanTab={1}\n              marginBottomTab={4}\n              marginBottom={1}\n            >\n              <Paragraph\n                className=\"gray\"\n                isLarge\n                content={paragraphSection as ParagraphWithRemarkFragment}\n              />\n            </Column>\n          </SingleColumnContainer>\n        )\n      case \"ContentfulFeatureSection\":\n        return (\n          <SingleColumnContainer key={`contentful-feature-section-${index}`}>\n            <Column leftSpanDesk={1} rightSpanDesk={1}>\n              <DualColumnContainer ignorePadding>\n                <FeatureSection\n                  features={(section as ContentfulFeatureSection).features as ContentfulFeature[]}\n                />\n              </DualColumnContainer>\n            </Column>\n            <Spacer heightMobile={0.5} heightTablet={0.5} />\n          </SingleColumnContainer>\n        )\n      case \"ContentfulContentBlock\":\n        const contentBlock = section as ContentfulContentBlock\n        return (\n          <Fragment key={`contentful-content-block-${index}`}>\n            <ContentBlock\n              proVersion\n              heading={contentBlock.heading?.heading!}\n              description={contentBlock.description as ParagraphWithRemarkFragment}\n              buttonsGroup={contentBlock.buttonsGroup as ContentfulLink[]}\n              backgroundImageDesktop={contentBlock.backgroundImageDesktop!}\n              backgroundImageTablet={contentBlock.backgroundImageTablet!}\n              backgroundImageMobile={contentBlock.backgroundImageMobile!}\n              contentTheme={contentBlock.contentTheme!}\n              contentPositionMobile={contentBlock.contentPositionMobile!}\n              contentPositionDesktop={contentBlock.contentPositionDesktop!}\n              showAllButtonsDesktop={contentBlock.showAllButtonsDesktop!}\n              showAllButtonsMobile={contentBlock.showAllButtonsMobile!}\n              contentBackground={contentBlock.contentBackground ?? \"white\"}\n              mainHeroBlock={contentBlock.mainHeroBlock!}\n            />\n          </Fragment>\n        )\n      default:\n        return null\n    }\n  })\n\n  return (\n    <ProPage title=\"Insights\" metadata={page?.metadata}>\n      <NavSpacer />\n      <>{components}</>\n    </ProPage>\n  )\n}\n\nexport default InsightsPage\n\nexport const pageQuery = graphql`\n  query Insights($locale: String = \"en\") {\n    page: contentfulPage(label: { eq: \"HMD ConnectPro - Insights\" }, node_locale: { eq: $locale }) {\n      metadata {\n        ...Metadata\n      }\n      sections {\n        ... on ContentfulContentBlock {\n          internal {\n            type\n          }\n          heading {\n            heading\n          }\n          description {\n            ...ParagraphWithRemark\n          }\n          buttonsGroup {\n            ...Link\n          }\n          backgroundImageMobile {\n            fluid(maxWidth: 767, quality: 80) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n          backgroundImageTablet {\n            fluid(maxWidth: 991, quality: 80) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n          backgroundImageDesktop {\n            fluid(maxWidth: 2000, quality: 80) {\n              ...GatsbyContentfulFluid_withWebp\n            }\n          }\n          contentTheme\n          contentPositionMobile\n          contentPositionDesktop\n          showAllButtonsDesktop\n          showAllButtonsMobile\n          enableBackgroundColor\n          contentAlignCenterMobile\n          contentBackground\n          mainHeroBlock\n        }\n        ... on ContentfulSimpleHero {\n          internal {\n            type\n          }\n          heading {\n            heading\n          }\n        }\n        ... on ContentfulParagraph {\n          ...ParagraphWithRemark\n          internal {\n            type\n          }\n        }\n        ... on ContentfulFeatureSection {\n          internal {\n            type\n          }\n          features {\n            internal {\n              type\n            }\n            heading {\n              heading\n            }\n            description {\n              ...ParagraphWithRemark\n            }\n          }\n        }\n      }\n    }\n  }\n`\n","import React from \"react\"\nimport styled from \"styled-components\"\n\nimport { ContentfulFeature, ContentfulParagraph } from \"../../types/graphql-types\"\nimport colors from \"../utils/colors\"\nimport { breakpoints } from \"./layout\"\n\nimport { RoundedContainer } from \"./layout\"\nimport Heading from \"./heading\"\nimport Paragraph from \"./paragraph\"\n\nconst FeatureContainer = styled(RoundedContainer)`\n  background-color: ${colors.white};\n  margin-bottom: 2em;\n  border: 2px solid #ececec;\n  box-shadow: 0 2px 63px -36px rgba(0, 0, 0, 0.38);\n  padding: 48px;\n\n  @media (min-width: ${breakpoints.tabletMin}) {\n    margin-bottom: 0;\n    padding: 48px;\n  }\n`\n\nconst StyledParagraph = styled(Paragraph)`\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  h3,\n  h4,\n  h5 {\n    margin: 1.875rem 0px 0px 0px;\n\n    a {\n      color: ${colors.dark};\n    }\n  }\n  img {\n    width: 100%;\n  }\n\n  p {\n    margin-top: 0;\n  }\n`\n\ntype FeatureSectionProps = {\n  features: ContentfulFeature[]\n}\n\nconst FeatureSection: React.FC<FeatureSectionProps> = ({ features }) => {\n  return (\n    <>\n      {features.map(\n        (feature, featureIndex) =>\n          (feature?.heading || feature?.description) && (\n            <FeatureContainer key={`feature-container-${featureIndex}`} alignLeft>\n              {feature.heading && (\n                <Heading level=\"h4\" size=\"h4\" content={feature.heading?.heading} />\n              )}\n              {feature.description && (\n                <StyledParagraph isSemiLarge content={feature.description as ContentfulParagraph} />\n              )}\n            </FeatureContainer>\n          )\n      )}\n    </>\n  )\n}\n\nexport default FeatureSection\n","import React from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Large } from \"./globalStyle\"\nimport {\n  ContentfulParagraph,\n  ParagraphWithRemarkFragment,\n  ContentfulAsset,\n  ContentfulLink,\n} from \"../../types/graphql-types\"\nimport { SingleColumnContainer, Column, breakpoints as bp } from \"../components/layout\"\nimport Heading from \"./heading\"\nimport ImageContainer from \"./ImageContainer\"\nimport Paragraph from \"../components/paragraph\"\nimport Button from \"./forms/button\"\nimport { navigate } from \"gatsby\"\nimport colors from \"../utils/colors\"\n\ninterface ContentBlockProps {\n  heading?: ParagraphWithRemarkFragment | ContentfulParagraph | string\n  description?: ParagraphWithRemarkFragment | ContentfulParagraph\n  buttonsGroup?: Array<ContentfulLink>\n  backgroundImageMobile: ContentfulAsset\n  backgroundImageTablet: ContentfulAsset\n  backgroundImageDesktop: ContentfulAsset\n  proVersion?: boolean\n  contentTheme?: string\n  contentPositionMobile?: string\n  contentPositionDesktop?: string\n  showAllButtonsDesktop?: boolean\n  showAllButtonsMobile?: boolean\n  enableBackgroundColor?: boolean\n  extraMarginTop?: boolean\n  contentAlignCenterDesktop?: boolean\n  contentAlignCenterMobile?: boolean\n  contentBackground: string\n  mainHeroBlock: boolean\n  wideContentColumn?: boolean\n}\n\ninterface ContentStylingProps {\n  contentTheme: string\n  contentPositionMobile: string\n  contentPositionDesktop: string\n  showAllButtonsDesktop: boolean\n  showAllButtonsMobile: boolean\n  enableBackgroundColor: boolean\n  contentAlignCenterMobile: boolean\n  contentBackground: string\n  wideContentColumn: boolean\n}\n\nconst ContentDescription = styled(Column)``\n\nconst SingleButton = styled(Button)`\n  z-index: 1;\n  @media (min-width: ${bp.tabletMin}) {\n    margin-bottom: 1.83em;\n    width: 232px;\n  }\n  @media (max-width: ${bp.mobileMax}) {\n    width: 196px;\n    height: 56px;\n    padding: 0;\n  }\n`\n\nconst ButtonsList = styled.div`\n  display: flex;\n`\nconst ContentContainerInner = styled(Column)`\n  h1,\n  h2,\n  ${ContentDescription} {\n    width: calc(100% - 2 * 8.333%);\n  }\n  @media (max-width: ${bp.mobileMax}) {\n    h2 {\n      margin: 0;\n    }\n  }\n  @media (min-width: ${bp.tabletMin}) and (max-width: ${bp.tabletMax}) {\n    h2 {\n      margin-top: 0;\n      padding-top: 1rem;\n    }\n  }\n`\n\nconst bgStyles = css`\n  display: flex;\n  flex-direction: column;\n  height: auto;\n  justify-content: center;\n  min-height: 380px;\n\n  @media (min-width: ${bp.tabletMin}) {\n    min-height: 700px;\n  }\n`\n\nconst lightContentStyles = css`\n  h1,\n  h2,\n  p {\n    color: ${colors.white};\n  }\n`\n\nconst onlyShowFirstButtonStyle = css`\n  ${ButtonsList} {\n    ${SingleButton} {\n      display: none;\n      &:first-child {\n        display: block;\n      }\n    }\n  }\n`\n\nconst multipleButtonsStyleMobile = css`\n  ${ButtonsList} {\n    display: flex;\n    flex-direction: column;\n    ${SingleButton} {\n      margin-bottom: 1rem;\n      &:last-child {\n        margin-bottom: 0;\n      }\n    }\n  }\n`\n\nconst multipleButtonsStyleDesktop = css`\n  flex-direction: row;\n  justify-content: flex-start;\n  ${SingleButton} {\n    margin-right: 24px;\n    &:last-child {\n      margin-right: 0;\n    }\n  }\n`\n\nconst contentLeftDesktop = css`\n  left: 0;\n  transform: translate(0, -50%);\n`\n\nconst contentRightDesktop = css`\n  transform: translate(100%, -50%);\n`\n\nconst contentAlignCenterMobileStyles = css`\n  text-align: center;\n  h1 {\n    margin: 2rem auto 10px auto;\n    font-size: 2rem;\n  }\n  ${ContentDescription} {\n    margin: 0 auto;\n    p {\n      font-size: 1rem;\n    }\n  }\n  ${ButtonsList} {\n    margin: 1rem auto 2rem auto;\n  }\n`\n\nconst ContentContainer = styled.div<ContentStylingProps>`\n  position: absolute;\n  margin-left: 1rem;\n  margin-right: 1rem;\n  width: calc(100% - 2rem);\n\n  ${ContentContainerInner} {\n    ${props => props.contentTheme === \"light\" && lightContentStyles}\n    ${props => (props.enableBackgroundColor ? bgStyles : \"\")}\n    border: 2px solid  ${props =>\n      props.enableBackgroundColor ? props.contentBackground : \"transparent\"};\n    background-color: ${props =>\n      props.enableBackgroundColor ? props.contentBackground : \"transparent\"};\n\n    ${props =>\n      props.contentPositionDesktop === \"left\" &&\n      `\n      @media (min-width: ${bp.tabletMin}) and (max-width: ${bp.tabletMax}) {\n        padding: 0 48px;\n      }\n    `}\n  }\n  \n  @media (max-width: ${bp.mobileMax}) {\n    height: 100%;\n    ${props =>\n      props.showAllButtonsMobile === true ? multipleButtonsStyleMobile : onlyShowFirstButtonStyle}\n    ${ContentContainerInner} {\n      ${props => props.contentPositionMobile === \"top\" && `margin: 2rem auto 0 auto;`}\n      ${props => props.contentPositionMobile === \"center\" && `margin: auto;`}\n      ${props => props.contentPositionMobile === \"bottom\" && `position: absolute; bottom: 0;`}\n      ${props => props.contentAlignCenterMobile && contentAlignCenterMobileStyles}\n      ${props =>\n        props.contentPositionMobile === \"bottom\" &&\n        props.enableBackgroundColor &&\n        `border-top-left-radius: 40px; border-top-right-radius: 40px;`}\n    }\n  }\n\n  @media (min-width: ${bp.tabletMin}) {\n    width: ${props => (props.wideContentColumn ? \"70%\" : \"calc(50% - (1.5 * 8.333%))\")};\n    margin: 0;\n    top: 50%;\n    \n    ${ContentContainerInner} {\n      ${props => props.contentPositionDesktop === \"left\" && contentLeftDesktop}\n      ${props => props.contentPositionDesktop === \"right\" && contentRightDesktop}\n      ${props =>\n        props.contentPositionDesktop === \"left\" &&\n        props.enableBackgroundColor &&\n        `border-top-right-radius: 40px; border-bottom-right-radius: 40px;`}\n        ${props =>\n          props.contentPositionDesktop === \"right\" &&\n          props.enableBackgroundColor &&\n          `border-top-left-radius: 40px; border-bottom-left-radius: 40px;`}\n    }\n    \n      ${props =>\n        props.showAllButtonsDesktop === true\n          ? multipleButtonsStyleDesktop\n          : onlyShowFirstButtonStyle}\n  }  \n`\n\nconst ImageBackgroundColumn = styled(Column)`\n  @media (min-width: ${bp.desktopMin}) {\n    max-height: 100vh;\n  }\n`\n\nconst ContentBlockContainer = styled.div<{ extraMarginTop: boolean; mainHeroBlock: boolean }>`\n  position: relative;\n  ${props => (props.extraMarginTop ? `margin-top: 96px;` : \"\")}\n  ${SingleColumnContainer} {\n    padding: 0;\n  }\n\n  ${ImageBackgroundColumn} {\n    @media (min-width: ${bp.desktopMin}) {\n      min-height: 500px;\n      max-height: ${props => (props.mainHeroBlock ? \"600px\" : \"500px\")};\n    }\n\n    @media (min-width: ${bp.tabletMin}) and (max-width: ${bp.tabletMax}) {\n      min-height: 490px;\n      max-height: ${props => (props.mainHeroBlock ? \"600px\" : \"490px\")};\n    }\n\n    @media (max-width: ${bp.mobileMax}) {\n      max-height: ${props => (props.mainHeroBlock ? \"680px;\" : \"565px\")};\n\n      img {\n        object-position: top !important;\n      }\n    }\n  }\n\n  ${ContentContainer} {\n    ${props =>\n      props.mainHeroBlock &&\n      `\n        @media (min-width: 400px) and (max-width: ${bp.mobileMax}) {\n          margin-left: 15%;\n          margin-right: 15%;\n          width: 70%;\n        }\n    `}\n  }\n\n  ${ContentDescription} {\n    ${props =>\n      props.mainHeroBlock\n        ? `\n        @media (max-width: ${bp.mobileMax}) {\n          p {\n            margin: 0;\n          }\n        }\n      `\n        : `\n      @media (max-width: ${bp.mobileMax}) {\n        p {\n          max-width: 320px;\n        }\n      }\n    `}\n  }\n`\n\nconst ContentBlock = ({\n  heading,\n  description,\n  buttonsGroup,\n  backgroundImageMobile,\n  backgroundImageTablet,\n  backgroundImageDesktop,\n  proVersion = false,\n  contentTheme = \"dark\",\n  contentPositionMobile = \"center\",\n  contentPositionDesktop = \"left\",\n  showAllButtonsDesktop = true,\n  showAllButtonsMobile = true,\n  enableBackgroundColor = false,\n  extraMarginTop = false,\n  contentAlignCenterMobile = false,\n  mainHeroBlock = false,\n  contentBackground,\n  wideContentColumn = false,\n}: ContentBlockProps) => {\n  return (\n    <ContentBlockContainer extraMarginTop={extraMarginTop} mainHeroBlock={mainHeroBlock}>\n      {backgroundImageDesktop && backgroundImageTablet && backgroundImageMobile && (\n        <SingleColumnContainer>\n          <ImageBackgroundColumn\n            leftSpanDesk={0}\n            rightSpanDesk={0}\n            leftSpanTab={0}\n            rightSpanTab={0}\n          >\n            <ImageContainer\n              borderRadius\n              mobileFloatingImage={backgroundImageMobile}\n              tabletFloatingImage={backgroundImageTablet}\n              desktopFloatingImage={backgroundImageDesktop}\n            />\n          </ImageBackgroundColumn>\n          <ContentContainer\n            contentTheme={contentTheme}\n            contentPositionDesktop={contentPositionDesktop}\n            contentPositionMobile={contentPositionMobile}\n            showAllButtonsMobile={showAllButtonsMobile}\n            showAllButtonsDesktop={showAllButtonsDesktop}\n            enableBackgroundColor={enableBackgroundColor}\n            contentAlignCenterMobile={contentAlignCenterMobile}\n            contentBackground={contentBackground!}\n            wideContentColumn={wideContentColumn}\n          >\n            <ContentContainerInner leftSpanTab={3} rightSpanTab={1} alignLeft>\n              {heading && (\n                <Heading\n                  level={mainHeroBlock ? \"h1\" : \"h2\"}\n                  size={mainHeroBlock ? \"h1\" : \"h2\"}\n                  ignoreMarginBottom\n                  pro={proVersion}\n                  content={heading}\n                />\n              )}\n              {description && (\n                <ContentDescription>\n                  <Paragraph\n                    isSemiLarge={mainHeroBlock}\n                    isLarge={!mainHeroBlock}\n                    content={description}\n                  />\n                </ContentDescription>\n              )}\n              <ButtonsList>\n                {buttonsGroup &&\n                  buttonsGroup.map((cta, index) => {\n                    return (\n                      <SingleButton\n                        key={index}\n                        type=\"button\"\n                        pro={proVersion}\n                        onClick={() => navigate(cta.url!)}\n                        data-gtm-cta={cta.gtm || \"\"}\n                      >\n                        {cta.heading}\n                      </SingleButton>\n                    )\n                  })}\n              </ButtonsList>\n            </ContentContainerInner>\n          </ContentContainer>\n        </SingleColumnContainer>\n      )}\n    </ContentBlockContainer>\n  )\n}\n\nexport default ContentBlock\n"],"sourceRoot":""}