{"version":3,"file":"components-headerWithBackgroungImage-headerWithBackgroungImage-5e771c670027ae758a31.js","mappings":"yJAiBA,UAdkC,SAAH,GAAyB,IAAD,EAAlBA,EAAW,EAAXA,YACnC,OACE,gBAAC,YAAgB,CACfC,YAAaD,SAAkB,QAAP,EAAXA,EAAaE,aAAK,WAAP,EAAX,EAAoBC,IACjCC,UAAkC,kBAAvBJ,aAAW,EAAXA,EAAaK,OAA2B,QAAU,IAE7D,gBAAC,WAAe,KACbL,aAAW,EAAXA,EAAaK,MACd,gBAAC,KAAS,OAIlB,C,oKCbaC,EAAYC,EAAAA,QAAAA,IAAAA,WAAU,sFAAVA,CAAU,kaAEzB,SAACC,GAAK,OAAKA,EAAMP,WAAW,IAiCzBQ,EAAWF,EAAAA,QAAAA,IAAAA,WAAU,qFAAVA,CAAU,8NAsBrBG,EAAQH,EAAAA,QAAAA,IAAAA,WAAU,kFAAVA,CAAU,iBAIlBI,EAAKJ,EAAAA,QAAAA,GAAAA,WAAS,+EAATA,CAAS,uD","sources":["webpack://sol-ecolution/./src/components/headerWithBackgroungImage/headerWithBackgroungImage.js","webpack://sol-ecolution/./src/components/headerWithBackgroungImage/headerWithBackgroungImageStyles.js"],"sourcesContent":["import * as Styled from \"./headerWithBackgroungImageStyles\";\nimport React from \"react\";\n\nconst HeaderWithBackgroundImage = ({ sectionData }) => {\n  return (\n    <Styled.Container\n      $background={sectionData?.image?.url}\n      className={sectionData?.title === \"In The Media\" ? \"fixed\" : \"\"}\n    >\n      <Styled.Centered>\n        {sectionData?.title}\n        <Styled.HR></Styled.HR>\n      </Styled.Centered>\n    </Styled.Container>\n  );\n};\n\nexport default HeaderWithBackgroundImage;\n","import styled from \"styled-components\";\n\nexport const Container = styled.div`\n  background:\n    url(${(props) => props.$background}) repeat-x;\n  position: relative;\n  // background-size: 1920px 180px;\n  background-size: 130%;\n  background-position: right;\n  text-align: center;\n  color: hsl(0, 0%, 100%);\n  max-width: 1920px;\n  padding: 70px;\n  width: 100%;\n\n  @media (max-width: 768px) {\n    width: 100%;\n    background-size: cover;\n    background-position: 35% top;\n  }\n\n  &.fixed {\n    position: fixed;\n    top: 80px;\n    z-index: 2;\n    @media (max-width: 1440px) {\n      width: 100%;\n    }\n    @media (max-width: 768px) {\n      top: 95px;\n    }\n    @media (max-width: 425px) {\n      top: 90px;\n    }\n  }\n`;\n\nexport const Centered = styled.div`\n  position: absolute;\n  font-size: 46px;\n  top: 50%;\n  left: 50%;\n  width: 100%;\n  transform: translate(-50%, -50%);\n  //border-bottom: 4px solid;\n\n  @media (max-width: 1440px) {\n    font-size: 38px;\n  }\n\n  @media (max-width: 768px) {\n    font-size: 34px;\n  }\n\n  @media (max-width: 425px) {\n    font-size: 32px;\n  }\n`;\n\nexport const Image = styled.img`\n  width: 100%;\n`;\n\nexport const HR = styled.hr`\n  opacity: 1;\n  width: 90px;\n  border: 2px solid;\n  margin: auto;\n`;\n"],"names":["sectionData","$background","image","url","className","title","Container","styled","props","Centered","Image","HR"],"sourceRoot":""}