import React from 'react'
import { getImage } from 'gatsby-plugin-image';

const Image = ({title, image}) => {
    return (
        <div style={{'--image-url': `url(${getImage(image).images.fallback.src})`}} className="[&>h3]:hover:-translate-y-7 bg-[size:100%] bg-center hover:bg-[size:110%] duration-[2s] ease-[cubic-bezier(0, 1, 0.35, 1)] transition-all flex items-center justify-center relative bg-no-repeat bg-[linear-gradient(to_bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),var(--image-url)] basis-1/3 h-80">
            <h3 className='transition uppercase text-white font-medium text-center'>{title}</h3>
        </div>
    )
}

export default Image