<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-[#0D3F40] text-[#383E43] font-semibold ms-0 md:ms-[1.458vw]"
        >
          درباره ما
        </h2>
        <p
          class="max-w-[766px] text-[3.59vw] md:text-[1.335vw] mt-[4vw] md:mt-[1.354vw] mb-[6vw] md:mb-0 leading-[7.179vw] md:leading-[2.865vw]"
        >
          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
          استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
          ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و
          کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی
          در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می
          طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
          الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این
          صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و
          شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای
          اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده
          قرار گیرد.
        </p>
      </div>

      <div class="relative basis-1/1 md:basis-1/2">
        <div class="grid-gallery mt-0 md:mt-[3.906vw] pb-[105vw] md:pb-0">
          <div class="panel"></div>
          <div class="panel"></div>
          <div class="panel"></div>
        </div>
      </div>
    </div>
  </div>
</template>


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

  .panel {
    background: url("./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("./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>