text: import React from 'react';
  import PropTypes from 'prop-types';
  import { Link } from 'gatsby';
  import { GatsbyImage, getImage } from 'gatsby-plugin-image';
  import { ChevronRightIcon } from '@heroicons/react/outline';
  
  const Item = ({ title, image, link }) => {
    const imageData = getImage(image);
    return (
      <Link
        to={link}
        style={{
          // fix for rounding images bug in Safari
          WebkitBackfaceVisibility: 'hidden',
          WebkitTransform: 'translate3d(0, 0, 0)',
        }}
        className="flex flex-col justify-between overflow-hidden rounded-md shadow-md bg-gray-50 group"
      >
        <figure>
          <GatsbyImage image={imageData} alt={title} />
          <figcaption className="px-4 pt-2">
            <h2 className="text-base sm:text-lg md:text-base lg:text-xl text-as-blue group-hover:text-red-700">
              {title}
            </h2>
          </figcaption>
        </figure>
        <div className="flex items-center self-end pb-4 pr-4">
          <span className="inline-flex items-center justify-center p-2 text-gray-500 rounded-full group-hover:text-as-blue group-hover:bg-gray-200">
            <ChevronRightIcon className="w-6 h-6" aria-hidden="true" />
          </span>
        </div>
      </Link>
    );
  };
  
  Item.propTypes = {
    title: PropTypes.string,
    link: PropTypes.string,
    image: PropTypes.object.isRequired,
  };
  
  export default Item;
  