text: import React from 'react'
  import {graphql, useStaticQuery} from 'gatsby'
  import img from '../images/image-1.jpeg'
  import Image from 'gatsby-image'
  
  const getImages = graphql`
  {
      fixed:file(relativePath:{eq:"image-3.jpeg"}){
          childImageSharp{
              fixed(width:300, grayscale: true){
                  ...GatsbyImageSharpFixed
              }
          }
      }
      fluid:file(relativePath:{eq:"image-2.jpeg"}){
          childImageSharp{
              fluid{
                  ...GatsbyImageSharpFluid
              }
          }
      }
  }
  `
  
  const Images = () => {
      const data = useStaticQuery(getImages)
      return (
          <section className="images">
              <article className="single-image">
                  <h3>Basic image</h3>
                  <img src={img} width="100%"/>
              </article>
              <article className="single-image">
                  <h3>Basic image</h3>
                  <Image fixed={data.fixed.childImageSharp.fixed} />
              </article>
              <article className="single-image">
                  <h3>Basic image</h3>
                  <Image fluid={data.fluid.childImageSharp.fluid} />
              </article>
          </section>
      )
  }
  
  export default Images
  