 <template>
  <div
    class="shadow h-[103.846vw] md:h-[21.094vw] rounded-[2.564vw] md:rounded-[0.781vw] animate-pulse bg-zinc-50"
  >
    <div class="relative text-center h-[56.154vw] md:h-[11.406vw]">
      <p
        class="post w-[30.769vw] md:w-[6.979vw] h-[9.487vw] md:h-[2.24vw] flexBox text-[3.59vw] md:text-[0.938vw] absolute left-0 bottom-0 bg-zinc-50 rounded-tr-[3.59vw] md:rounded-tr-[0.781vw]"
      >
       
        <span class="ms-[1vw] md:ms-[0.2vw] text-[2.236vw] md:text-[0.585vw]"
          ></span
        >
      </p>
      <div
        class="h-[56.154vw] md:h-[11.406vw] w-full rounded-[3.846vw] md:rounded-[0.781vw] bg-zinc-100"
      ></div>
    </div>

    <div class="flexBox flex-col">
      <div
        class="w-[69.231vw] md:w-[16vw] space-y-[9vw] md:space-y-[1.4vw] mt-[4vw] md:mt-[0vw] xl:mt-[0.7vw]"
      >
        <div
          class="bg-zinc-100 w-[9vw] h-[1vw] rounded-[0.2vw]"
        >
    </div>
        <div class="flex justify-between text-[3.614vw] md:text-[0.658vw]">
          <div class="bg-zinc-100 w-[4vw] h-[1vw] rounded-[0.2vw]">

          </div>
          <div class="bg-zinc-100 w-[4vw] h-[1vw] rounded-[0.2vw]">

          </div>
          <div class="bg-zinc-100 w-[4vw] h-[1vw] rounded-[0.2vw]">

          </div>


        </div>
        <div class="flex justify-between !mt-[2.2vw]">
        <div class="bg-zinc-100 w-[8vw] h-[2vw] rounded-[0.2vw]">

        </div>
        <div class="bg-zinc-100 w-[2vw] h-[2vw] rounded-[50%]">

        </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.post::before {
  content: "";
  position: absolute;
  top: -8.1vw;
  left: 0vw;
  width: 3vw;
  height: 8.1vw;
  border-bottom-left-radius: 0.781vw;
  box-shadow: -0.03vw 0.8vw 0 -0.026vw #fafafa;
}
.post::after {
  content: "";
  position: absolute;
  top: 0.15vw;
  left: 100%;
  width: 1.083vw;
  height: 2.083vw;
  border-bottom-left-radius: 0.781vw;
  box-shadow: -0.26vw 1.042vw 0 0.026vw #fafafa;
}

@media (max-width: 768px) {
  .post::before {
    content: "";
    position: absolute;
    top: -8.1vw;
    left: 0vw;
    width: 3vw;
    height: 8.1vw;
    border-bottom-left-radius: 3.59vw;
    box-shadow: -0.03vw 2.8vw 0 -0.026vw #fafafa;
  }
  .post::after {
    content: "";
    position: absolute;
    top: 3.4vw;
    left: 100%;
    width: 5.083vw;
    height: 6.083vw;
    border-bottom-left-radius: 3.59vw;
    box-shadow: -1vw 2vw 0 0.026vw #fafafa;
  }
}
</style>