<template>
  <section class="section-two">
    <div class="flex flex-col items-center py-6">
      <div>قابلیت ها</div>
      <div>
        <img
          width="32"
          height="32"
          fit="auto"
          quality="80"
          placeholder
          src="/img/haditha/chevron-down.svg"
        />
      </div>
    </div>

    <div class="flex flex-col lg:flex-row">
      <div class="my-card card-one basis-full flex justify-center items-center">
        <div class="inner-container">
          <div class="px-4">
            <p class="title">جستجوی معنایی</p>
            <div class="mb-6">
              <p class="description">ارائه نتایج دقیق و معنادار از میان</p>
              <p class="description">حجم انبوه متون حدیثی</p>
            </div>
          </div>

          <img
            fit="auto"
            quality="80"
            placeholder
            src="/img/haditha/card-one.webp"
          />
        </div>
      </div>
      <div class="my-card card-two basis-full flex justify-center items-center">
        <div class="inner-container">
          <div class="px-4">
            <p class="title">جستجوی مترادف‌ها</p>
            <div class="mb-6">
              <p class="description">یافتن سریع واژگان مرتبط برای</p>
              <p class="description">درک بهتر مفاهیم حدیثی</p>
            </div>
          </div>

          <img
            fit="auto"
            quality="80"
            placeholder
            src="/img/haditha/card-two.webp"
          />
        </div>
      </div>
      <div
        class="my-card card-three basis-full flex flex-col justify-center items-center"
      >
        <div class="inner-container">
          <div class="px-4">
            <p class="title">مشابهت‌یابی حدیث</p>
            <div class="mb-6">
              <p class="description">امکان یافتن احادیث یا مفاهیمی</p>
              <p class="description">با معنای مشابه یک حدیث</p>
            </div>
          </div>

          <img
            fit="auto"
            quality="80"
            placeholder
            src="/img/haditha/card-three.webp"
          />
        </div>
      </div>
    </div>
  </section>
</template>
<script></script>
<style scoped>
.section-two {
  font-weight: 200;
  font-size: 1.25rem; /*20px;*/
  line-height: 1.8rem; /*30px;*/
  letter-spacing: 0%;
  text-align: center;

  .my-card {
    background-repeat: no-repeat;
    background-size: auto;
    height: 41.25em; /* 660px*/
    padding: 4.7em 0;

    .inner-container {
      max-width: 21.25em;
      margin: auto;
    }
    .title {
      font-family: IRANSansX;
      font-weight: 700;
      font-size: 1.5rem; /*24px*/
      line-height: 2.25rem; /* 36px;*/
      letter-spacing: 0%;
      color: var(--ui-color-two);
      text-align: right;
      margin-bottom: 0.5em;
    }

    .description {
      font-weight: 300;
      font-size: 1.25rem; /* 20px;*/
      line-height: 1.87rem; /* 30px;*/
      letter-spacing: 0%;
      text-align: right;
      color: #626b84;
    }

    &.card-one {
      background-image: url("/img/haditha/card-one-bgi.webp"),
        linear-gradient(134.17deg, #ffffff -9.81%, #e5e0ff 87.62%);
    }
    &.card-two {
      background-image: url("/img/haditha/card-two-bgi.webp"),
        linear-gradient(329.16deg, #b9fde0 13.45%, #eefff8 63.57%);
    }
    &.card-three {
      background-image: url("/img/haditha/card-three-bgi.webp"),
        linear-gradient(134.17deg, #ffffff -9.81%, #e5e0ff 87.62%);
    }
  }
}
</style>
