<div class="relative grid grid-cols-5 grid-rows-[auto_1fr_auto] gap-4 aspect-[0.68/1] mt-3">
   <div class="col-span-full row-span-full">
      <NuxtImg class="size-full object-cover drop-shadow-main rounded-tl-xl rounded-tr-4xl rounded-bl-4xl"
         :src="'/fs/' + thumbnail?.path" alt="" />
   </div>

   <div class="relative col-[1/4] row-[1/1] ml-4 px-4 py-3 bg-primary-900 max-w-max rounded-b-4xl z-10
   radial-top before:left-0 before:-top-2 before:-translate-x-full before:scale-[-1_1] after:right-0 after:-top-2
      after:translate-x-full">
      <div class="flex gap-3 items-center">
         <p v-if="status != null">{{ CAT_ENUM.status[status as keyof typeof CAT_ENUM.status] }}</p>

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

   <div class="relative col-[3/-1] row-[3/3] px-4 py-3 bg-primary-900 max-w-max rounded-tl-4xl justify-self-end text-5xl z-10
      radial before:left-0 before:rotate-180 before:bottom-0 before:-translate-x-full after:right-0 after:bottom-full after:rotate-180
      shadow-main-inset [box-shadow:10px_13px_0_var(--color-primary-900)]">
      <p>${{ price }}</p>
   </div>
</div>

<style scoped>
.radial-top::before,
.radial-top::after {
   position: absolute;
   display: block;
   --_size: 15px;
   width: 20px;
   aspect-ratio: 1;
   background-image: radial-gradient(circle at 78% 100%,
         transparent var(--_size),
         var(--color-primary-900, white) calc(var(--_size) + 1px));
   /* red calc(var(--_size) + 1px)); */
}

.radial::before,
.radial::after {
   position: absolute;
   display: block;
   --_size: 36px;
   width: var(--_size);
   aspect-ratio: 1;
   background-image: radial-gradient(circle at 100% 100%,
         transparent var(--_size),
         var(--color-primary-900, white) calc(var(--_size) + 1px));
}
</style>

<div class="relative grid grid-cols-5 grid-rows-[auto_1fr_auto] gap-4 aspect-[0.68/1] mt-3">
   <div class="col-span-full row-span-full">
      <NuxtImg class="size-full object-cover drop-shadow-main rounded-tl-xl rounded-tr-4xl rounded-bl-4xl"
         :src="'/fs/' + thumbnail?.path" alt="" />
   </div>

   <div class="relative col-[1/4] row-[1/1] ml-4 px-4 py-3 bg-primary-900 max-w-max rounded-b-4xl z-10
   radial-top before:left-0 before:-top-2 before:-translate-x-full before:scale-[-1_1] after:right-0 after:-top-2
      after:translate-x-full">
      <div class="flex gap-3 items-center">
         <p v-if="status != null">{{ CAT_ENUM.status[status as keyof typeof CAT_ENUM.status] }}</p>

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

   <div class="relative col-[3/-1] row-[3/3] px-4 py-3 bg-primary-900 max-w-max rounded-tl-4xl justify-self-end text-5xl z-10
      radial before:left-0 before:rotate-180 before:bottom-0 before:-translate-x-full after:right-0 after:bottom-full after:rotate-180
      shadow-main-inset [box-shadow:10px_13px_0_var(--color-primary-900)]">
      <p>${{ price }}</p>
   </div>
</div>

<style scoped>
.radial-top::before,
.radial-top::after {
   position: absolute;
   display: block;
   --_size: 15px;
   width: 20px;
   aspect-ratio: 1;
   background-image: radial-gradient(circle at 78% 100%,
         transparent var(--_size),
         var(--color-primary-900, white) calc(var(--_size) + 1px));
   /* red calc(var(--_size) + 1px)); */
}

.radial::before,
.radial::after {
   position: absolute;
   display: block;
   --_size: 36px;
   width: var(--_size);
   aspect-ratio: 1;
   background-image: radial-gradient(circle at 100% 100%,
         transparent var(--_size),
         var(--color-primary-900, white) calc(var(--_size) + 1px));
}
</style>