Substract image with css

<div class="relative rounded-2xl bg-primary-900 p-4">
   <p class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center z-10">{{ name }}</p>

   <div class="relative aspect-[0.68/1] mt-3 rounded-4xl overflow-hidden">
      <NuxtImg class="size-full object-cover drop-shadow-main" :src="'/fs/' + thumbnail?.path" alt="" />

      <div class="absolute top-0 left-5 px-6 py-3 bg-primary-900 rounded-b-4xl">
         <div class="flex gap-3 items-center">
            <!-- @vue-skip -->
            <p v-if="status != null">{{ CAT_ENUM.status[status as keyof typeof CAT_ENUM.status] }}</p>

            <p>{{ gender }}</p>
         </div>
      </div>

      <div class="absolute bottom-0 right-0 px-6 py-3 bg-primary-900">
         <p>${{ price }}</p>
      </div>
   </div>

   <NuxtLink class="mt-4 block" to="">more information</NuxtLink>
</div>