Tailwind CSS: как сделать так, чтобы изображение выскакивало из div

Вот вид моего компонента:

<section className = "embla p-6 lg:p-8 flex flex-col gap-4">
      <div className = "embla__viewport" ref = {emblaRef}>
        <div className = "embla__container">
          {slides.map((item: ProductCollectionWithPreviews) => (
            <div className = "embla__slide p-5" key = {item.products[0].title}>
              <div className = "h-[300px] aspect-video bg-gray-400 rounded-md backdrop-blur-xl bg-opacity-5 flex flex-col overflow-visible">
                <div className = "h-[150px] flex items-center justify-center overflow-visible">
                  <div className = "relative z-10">
                    <Image
                        src = {item.products[0].thumbnail}
                        width = {300}
                        height = {300}
                        alt = "Picture of the product"
                        className = "skew-y-2 drop-shadow-2xl"
                    />
                  </div>
                </div>
                <div className = "h-[150px] flex items-center p-8">
                  <div className = "flex flex-col">
                    <span className = "text-xl text-white">{item.products[0].title}</span>
                    <span className = "text-sm text-slate-200">{item.products[0].title}</span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

Я пытаюсь сделать так, чтобы изображение «выскакивало» из div, но все, что я получаю, это обрезанное изображение. Вот как это выглядит сейчас: