text: import React from 'react';
  import styled from 'styled-components';
  import { StaticQuery, graphql } from 'gatsby';
  import Img from 'gatsby-image';
  
  import { Section, Container } from '@components/global';
  
  const About = () => (
    <StaticQuery
      query={graphql`
        query {
          art_fast: file(
            sourceInstanceName: { eq: "art" }
            name: { eq: "fast" }
          ) {
            childImageSharp {
              fluid(maxWidth: 760) {
                ...GatsbyImageSharpFluid_withWebp_tracedSVG
              }
            }
          }
  
          art_learn: file(
            sourceInstanceName: { eq: "art" }
            name: { eq: "learn_yourself" }
          ) {
            childImageSharp {
              fluid(maxWidth: 760) {
                ...GatsbyImageSharpFluid_withWebp_tracedSVG
              }
            }
          }
  
          art_ideas: file(
            sourceInstanceName: { eq: "art" }
            name: { eq: "ideas" }
          ) {
            childImageSharp {
              fluid(maxWidth: 760) {
                ...GatsbyImageSharpFluid_withWebp_tracedSVG
              }
            }
          }
        }
      `}
      render={data => (
        <Section id="">
          <Container>
            <Grid>
              <div>
                <h2>You Grow, We Grow</h2>
                <p>
                  We keep your brand’s best interests in mind while formulating strategies for content marketing or branding of your product or service.
                  We work to build long term mutually beneficial relationships by focusing on getting what you need to gain at every juncture.
                </p>
              </div>
              <Art>
                <Img fluid={data.art_fast.childImageSharp.fluid} />
              </Art>
            </Grid>
            <Grid inverse>
              <Art>
                <Img fluid={data.art_learn.childImageSharp.fluid} />
              </Art>
              <div>
                <h2>Skilled Team</h2>
                <p>
                  Our highly skilled team is a melting pot of talent. 
                  With skilled gained by delivering innovative and effective content solutions over years, 
                  our team can be counted upon for quality deliverables.
                </p>
              </div>
            </Grid>
            <Grid>
              <div>
                <h2>360° Vision</h2>
                <p>
                We ascertain that the solutions offered by us are after a thorough analysis of the product and market. 
                Our efficient team explores an entire spectrum of possibilities and problem areas to generate content that drives traffic and revenue.
                 
                </p>
              </div>
              <Art>
                <Img fluid={data.art_ideas.childImageSharp.fluid} />
              </Art>
            </Grid>
          </Container>
        </Section>
      )}
    />
  );
  
  const Grid = styled.div`
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-gap: 40px;
    text-align: right;
    align-items: center;
    justify-items: center;
    margin: 24px 0;
  
    ${props =>
      props.inverse &&
      `
      text-align: left;
      grid-template-columns: 2fr 3fr;
    `}
  
    h2 {
      margin-bottom: 16px;
    }
  
    @media (max-width: ${props => props.theme.screen.md}) {
      grid-template-columns: 1fr;
      text-align: left;
      margin-bottom: 96px;
  
      &:last-child {
        margin-bottom: 24px;
      }
  
      ${props =>
      props.inverse &&
      `
          ${Art} {
            order: 2;
          }
      `}
    }
  `;
  
  const Art = styled.figure`
    margin: 0;
    max-width: 380px;
    width: 100%;
  `;
  
  export default About;
  