Gatsby Image

export const squareImage = graphql`
    fragment squareImage on File {
        childImageSharp {
            fluid(maxWidth: 520, maxHeight: 400) {
                ...GatsbyImageSharpFluid
            }
        }
    }
`;

export default () => {
    const data = useStaticQuery(
        graphql`
            query {
                image1: file(relativePath: { eq: "image1.png" }) {
                    ...squareImage
                }
                image2: file(relativePath: { eq: "image2.png" }) {
                    ...squareImage
                }
                image3: file(relativePath: { eq: "image3.png" }) {
                    ...squareImage
                }
                image4: file(relativePath: { eq: "image3.png" }) {
                    ...squareImage
                }
            }
        `
    );
    return (
        <>
            <Section>
                <Grid>
                    <Art>
                        <Img fluid={data.image1.childImageSharp.fluid} alt="" />
                    </Art>
                </Grid>
            </Section>
            <Section accent="alt">
                <Grid inverse>
                    <Art>
                        <Img fluid={data.image2.childImageSharp.fluid} alt="" />
                    </Art>
                </Grid>
            </Section>
            <Section>
                <Grid>
                    <Art>
                        <Img fluid={data.image3.childImageSharp.fluid} alt="" />
                    </Art>
                </Grid>
            </Section>
            <Section accent="alt">
                <Grid inverse>
                    <Art>
                        <Img fluid={data.image4.childImageSharp.fluid} alt="" />
                    </Art>
                </Grid>
            </Section>
        </>
    );
};