如何用Tailwind CSS在移动端和平板端实现图片略置于卡片上方

说明：该效果在桌面端可正常显示，但在移动端和平板端无法生效，恳请社区提供帮助。

<div>
  <div className='justify-center mt-16 md:pb-6 lg:pb-0 lg:flex lg:mx-36 md:mx-auto rounded-2xl bg-neutral-800'>
    {/* 第一列 */}
    <div className="-mt-10 lg:relative">
      <Image
        src="/images/review/image-jeremy-large@2x.png"
        width={290}
        height={290}
        alt="人物"
        className="w-56 mx-auto rounded-xl lg:w-72"
      />
    </div>

    {/* 第二列 */}
    <div>
      <Image
        src="/images/review/patternCurveDiagonalLine.png"
        width={60}
        height={60}
        alt="斜向曲线图案"
        className="mx-auto mt-10 lg:mt-32 lg:mx-14"
      />
    </div>
    {/* 第三列 */}
  </div>
</div>
</div>

内容的提问来源于stack exchange，提问作者John Cañero