Mobile drag issues about keen-slider HOT 2 OPEN

import Link from 'next/link';

import { Button } from '@components/buttons';
import { OptimizedImage } from '@components/images/OptimizedImage';
import { SpriteCategories } from '@enums';
import type { BasePageWithImageSelectionType } from '@shared/types/selections/Common';
import { cn } from '@utils/cn';

type Props = BasePageWithImageSelectionType & {
  className?: string;
};

export const ProjectCard = ({ className = '', headline, image, slug, title, ...props }: Props) => (
  <Link
    passHref
    className={cn('group', className)}
    data-aos="fade-up"
    href={`/projects/${slug}`}
    {...props}
  >
    <article className="relative isolate h-full min-h-[400px] w-full overflow-hidden rounded-lg shadow-sm lg:h-80">
      <OptimizedImage
        fill
        alt={title}
        className="-z-10 object-cover object-center transition-all duration-500 ease-in-out group-hover:scale-125"
        image={image}
      />

      <div className="absolute inset-0 -z-10 bg-gradient-to-b from-transparent to-zinc-900" />

      <div className="mt-auto flex h-full flex-col justify-end px-4 py-6 text-zinc-200">
        <h3 className="mb-1 text-lg font-semibold text-zinc-50">{title}</h3>
        {!!headline && <p className="line-clamp-3 text-sm">{headline}</p>}

        <Button
          className="mt-4 max-w-fit"
          variant="text"
          icon={{
            category: SpriteCategories.ARROWS,
            name: 'arrow-narrow-right',
            position: 'suffix',
          }}
        >
          Ver mais
        </Button>
      </div>
    </article>
  </Link>
);