<template>
  <div
    class="h-[235px] sm:h-[350px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block relative"
  >
    <!-- <svg
    class=""
      viewBox="0 0 870 350"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <path
        d="M0 20C0 8.9543 8.95431 0 20 0H847.666C858.641 0 867.565 8.84318 867.665 19.817L869.815 254.817C869.917 265.934 860.933 275 849.816 275H653C641.954 275 633 283.954 633 295V330C633 341.046 624.046 350 613 350H20C8.95431 350 0 341.046 0 330V20Z"
        fill="url(#pattern0_381_6471)"
      />
      <defs>
        <pattern
          id="pattern0_381_6471"
          patternContentUnits="objectBoundingBox"
          width="1"
          height="1"
        >
          <use
            xlink:href="#image0_381_6471"
            transform="matrix(0.000732064 0 0 0.0018197 0 -0.198766)"
          />
        </pattern>
        <image
          id="image0_381_6471"
          width="1366"
          height="768"
          preserveAspectRatio="none"
          xlink:href="/block.webp"
        />
      </defs>
    </svg> -->
    <img class="image"
         src="/block.webp"
         alt=""
    >
    <slot />
  </div>
</template>

<script lang="ts" setup></script>

<style>
.image {
  clip-path: path(
    'M0 20C0 8.9543 8.95431 0 20 0H847.666C858.641 0 867.565 8.84318 867.665 19.817L869.815 254.817C869.917 265.934 860.933 275 849.816 275H653C641.954 275 633 283.954 633 295V330C633 341.046 624.046 350 613 350H20C8.95431 350 0 341.046 0 330V20Z'
  );
}
</style>
