text: import React from 'react'
  import { graphql, StaticQuery } from 'gatsby'
  import styled from 'styled-components'
  
  import BackgroundImage from 'gatsby-background-image'
  
  const BackgroundSection = ({ className }) => (
      <StaticQuery query={graphql`
        query {
          desktop: file(relativePath: { eq: "AboutBackground.png" }) {
            childImageSharp {
              fluid(quality: 90, maxWidth: 4160) {
                ...GatsbyImageSharpFluid_withWebp
              }
            }
          }
        }
      `}
       render={data => {
         // Set ImageData.
         const imageData = data.desktop.childImageSharp.fluid
         return (
            <BackgroundImage Tag="section"
                             className={className}
                             fluid={imageData}
                             backgroundColor={`#040e18`}
            >
              <h1>Our mission</h1>
            </BackgroundImage>
         )
       }
       }
      />
  )
  
  const StyledBackgroundSection = styled(BackgroundSection)`
    width: 100%;
    background-position: bottom center;
    background-repeat: repeat-y;
    background-size: cover;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    h1 {
      color: #fff;
      font-size: 80px;
      margin-bottom: 45px;
      text-transform: uppercase;
      font-style: italic;
      font-weight: 700;
      @media(max-width:800px){
          font-size: 60px;
          margin-bottom: 80px;
      }
    }
    
  `
  
  export default StyledBackgroundSection