<template>
  <div class="flex justify-center mt-[10vw] md:mt-[8vw] pb-[10vw]">
    <div
      class="w-[87.69%] md:w-[81.04%] flex flex-col md:flex-row justify-between mt-[3.846vw] md:mt-[1.667vw]"
    >

      <div class="basis-1/1 md:basis-1/2">
        <h2
          class="text-[5.11vw] md:text-[1.69vw] text-primaryGreen text-[#383E43] font-semibold ms-0 md:ms-[1.458vw]"
        >
          درباره ما
        </h2>
        <div
        v-html="info.data.value.about"
          class="about text-[#383E43] max-w-[766px] text-[3.59vw] md:text-[16px] mt-[4vw] md:mt-[1.354vw] mb-[6vw] md:mb-0 leading-[7.179vw] font-light md:leading-[1.865vw]"
        >
      </div>
      </div>

      <div class="relative basis-1/1 md:basis-1/2">
        <div class="grid-gallery mt-0 md:mt-[3.906vw] pb-[120vw] md:pb-0">
          <div class="panel"></div>
          <div class="panel"></div>
          <div class="panel"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const info = await useFetch('/api/settings')

</script>

<style>
@media (min-width: 768px) { 

  .panel {
    background: url("public/images/aboutUs.jpg");
    background-size: cover;
    background-repeat: no-repeat !important;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    position: absolute;
  }
  .panel:nth-child(1) {
    width: 16.667vw !important;
    height: 16.667vw !important;
    top: 4vw !important;
    left: -0.1vw !important;
    background-position-x: 28% !important;
    background-position-y: 0% !important;
    background-size: 340% !important;
  }
  .panel:nth-child(2) {
    top: 12.75vw !important;
    left: 0.26vw !important;
    height: 33.076vw !important;
    width: 33.076vw !important;
    background-position-x: 50% !important;
    background-position-y: -7.24vw !important;
    background-size: 150% !important;
  }
  
  .panel:nth-child(3) {
    width: 16.667vw !important;
    height: 16.667vw  !important;
    top: 4vw !important;
    left: 17.1vw !important;
    background-size: 300% !important;
    background-position-x: 75% !important;
    background-position-y: 0% !important;
  }
 }

 .panel {
  background: url("public/images/aboutUs.jpg");
  background-size: cover;
  background-repeat: no-repeat !important;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  position: absolute;
}
 .panel:nth-child(1) {
  width: 45.667vw;
  height: 45.667vw;
  top: 9vw;
  left: -2.5vw;
  background-position-x: 28%;
  background-position-y: 0%;
  background-size: 340%;
}
.panel:nth-child(2) {
  top: 32.75vw;
  left: 0.26vw;
  height: 87.076vw;
  width: 87.692vw;
  background-position-x: 50%;
  background-position-y: 310%;
  background-size: 160%;
}

.panel:nth-child(3) {
  width: 45.667vw;
  height: 45.667vw;
  top: 9vw;
  left: 45.2vw;
  background-size: 300%;
  background-position-x: 75%;
  background-position-y: 0%;
}
</style>