<template>
  <div class="bg-white flex justify-center pt-[20vw] md:pt-[9vw] md:mt-[3.6vw] md:pb-[21vw]" dir="rtl">
    <div class="w-[87.69%] md:w-[81.04%] flex flex-col flex-col-reverse md:flex-row">

      <div dir="rtl" class="z-[1] mt-[70vw] md:mt-0"> 
        <svg
        class="w-[16.154vw] h-[16.154vw] md:h-[6.979vw] md:w-[6.979vw]"
          width="134"
          height="134"
          viewBox="0 0 134 134"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M50.2503 122.833H83.7503C111.667 122.833 122.834 111.667 122.834 83.7498V50.2498C122.834 22.3332 111.667 11.1665 83.7503 11.1665H50.2503C22.3337 11.1665 11.167 22.3332 11.167 50.2498V83.7498C11.167 111.667 22.3337 122.833 50.2503 122.833Z"
            stroke="#878787"
            stroke-width="10"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M66.9997 86.5418C77.7922 86.5418 86.5413 77.7927 86.5413 67.0002C86.5413 56.2076 77.7922 47.4585 66.9997 47.4585C56.2071 47.4585 47.458 56.2076 47.458 67.0002C47.458 77.7927 56.2071 86.5418 66.9997 86.5418Z"
            stroke="#878787"
            stroke-width="10"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M98.4687 39.0832H98.5332"
            stroke="#878787"
            stroke-width="10"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>

        <h2
          class="pb-[0.6vw] mt-[0.8vw] text-[8.318vw] md:text-[2.813vw] text-[#383E43] font-[700] max-w-[57.949vw] md:max-w-[19.531vw]"
        >
          مارا در اینستاگرام دنبال کنید
        </h2>
        <div class="birder-b border-[1px] w-[40vw] md:w-[13vw]"></div>
        <p class="cursor-pointer hover:text-black group/edit pb-[20vw] md:pb-0 flex items-center mt-[1.7vw] text-[4.038vw] md:text-[1.055vw] text-[#878787]">
          دنبال کردن
          <svg

            class="group-hover/edit:-translate-x-2 transition duration-300 group-hover/edit:duration-300  ms-5 h-[6.667vw] w-[6.667vw] md:h-[2.604vw] md:w-[2.604vw]"
            width="2.604vw"
            height="2.604vw"
            viewBox="0 0 50 50"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
            class="group-hover/edit:stroke-black"
              d="M25.0003 45.8332C36.5063 45.8332 45.8337 36.5058 45.8337 24.9998C45.8337 13.4939 36.5063 4.1665 25.0003 4.1665C13.4944 4.1665 4.16699 13.4939 4.16699 24.9998C4.16699 36.5058 13.4944 45.8332 25.0003 45.8332Z"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
                class="group-hover/edit:stroke-black"
              d="M32.292 25H19.792"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
                class="group-hover/edit:stroke-black"
              d="M23.958 18.75L17.708 25L23.958 31.25"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </p>
      </div>

      <div class="relative ms-0 md:ms-[6.8vw] gallery w-full md:w-[32.604vw] h-[32.604vw]">
        <div class="grid grid-cols-2">
            <img src="/public/images/gallery1.jpg" class="h-[43.846vw] md:h-[16.302vw] object-cover w-full " alt="">
            <img src="/public/images/gallery2.jpg" class="h-[43.846vw] md:h-[16.302vw] h-[16.302vw] object-cover w-full" alt="">
            <img src="/public/images/gallery3.jpg" class="h-[43.846vw] md:h-[16.302vw] h-[16.302vw] object-cover w-full" alt="">
            <img src="/public/images/gallery1.jpg" class="h-[43.846vw] md:h-[16.302vw] h-[16.302vw] object-cover w-full" alt="">
        </div>
        <div class="hidden md:block -left-[21.5vw] top-[5.6vw] absolute h-[41.042vw] w-[23.438vw]">
            <img src="/public/images/gallery4.jpg" class="h-[20.521vw] object-cover w-full" alt="">
            <img src="/public/images/gallery5.jpg" class="h-[20.521vw] object-cover w-full" alt="">
        </div>
      </div>
    </div>
  </div>
</template>