마우스를 올리면 살짝 떠오르며 그림자가 깊어지는 카드

const ART = "https://nnuer.site/brand/landing";

/** A soft card that rises 4px and casts a deeper shadow on hover or keyboard focus */
export default function HoverLiftCard() {
  return (
    <section className="grid w-full place-items-center bg-[#fbfbfc] px-4 py-24">
      <a
        href="#"
        className="block w-[300px] rounded-[28px] border border-black/[0.07] bg-gradient-to-b from-white to-[#f4f3f8] px-7 pb-[34px] pt-8 shadow-[0_30px_60px_-36px_rgba(60,40,120,0.3)] transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-1 hover:shadow-[0_36px_70px_-34px_rgba(60,40,120,0.4)] focus-visible:-translate-y-1 focus-visible:shadow-[0_36px_70px_-34px_rgba(60,40,120,0.4)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#7c3aed] motion-reduce:transition-none motion-reduce:hover:translate-y-0 motion-reduce:focus-visible:translate-y-0"
      >
        <img src={`${ART}/kind-interaction.webp`} alt="" className="h-[104px] w-[120px] object-contain object-left" />
        <h3 className="mt-[30px] text-[24px] font-bold tracking-[-0.02em] text-[#111114]">인터랙션</h3>
        <p className="mt-2.5 text-[15.5px] leading-[1.65] text-[#5c5c68]">버튼, 로딩, 전환처럼 움직임과 반응이 핵심인 조각</p>
      </a>
    </section>
  );
}