text: import React from 'react';
  import { StaticQuery, graphql } from 'gatsby';
  import Img from 'gatsby-image';
  import '../../sass/main.scss';
  
  const GET_IMAGES = graphql`
    {
      getImages: allFile(filter: { relativeDirectory: { eq: "homeGallery" } }) {
        edges {
          node {
            childImageSharp {
              fluid(maxWidth: 500) {
                ...GatsbyImageSharpFluid_tracedSVG
              }
            }
          }
        }
      }
    }
  `;
  
  const Gallery = () => {
    return (
      <StaticQuery
        query={GET_IMAGES}
        render={data => {
          const images = data.getImages.edges;
  
          return (
            <section className="section">
              <div className="gallery-wrapper">
                {images.map(({ node }, index) => {
                  return (
                    <div key={index} className={`item item-${index + 1}`}>
                      <Img fluid={node.childImageSharp.fluid} />
                      <p className="info">awesome pizza</p>
                    </div>
                  );
                })}
  
                {/* <div className="item item-1">
                  <Img fluid={img1} />
                  <p className="info">awesome pizza</p>
                </div>
                <div className="item item-2">
                  <Img fluid={img2} />
                  <p className="info">awesome pork</p>
                </div>
                <div className="item item-3">
                  <Img fluid={img3} />
                  <p className="info">awesome steak</p>
                </div> */}
              </div>
            </section>
          );
        }}
      />
    );
  };
  
  export default Gallery;
  