<template>
  <section class="section-two">
    <div class="flex flex-col items-center py-6 features">
      <a href="#features-section">قابلیت ها</a>
      <div>
        <img
          class="arrow-down-image"
          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" id="features-section">
      <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.png"
          />
        </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.png"
          />
        </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.png"
          />
        </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: var(--font);
      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%);
    }
  }
}

@media screen and (max-width: 719.99px) {
  .section-two {
    .features {
      font-weight: 200;
      font-size: 1.25rem; /*20px;*/
      line-height: 1.8rem; /*30px;*/
      letter-spacing: 0%;
      text-align: center;
    }

    .arrow-down-image {
      width: 1em; /*8px;*/
      height: 1em; /*8px;*/
    }

    .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-weight: 500;
        font-size: 1.1rem; /* 18px;*/
        line-height: 100%;
        letter-spacing: 0%;
      }

      .description {
        font-weight: 300;
        color: #626b84;
        font-size: 1rem;
        line-height: 120%;
        letter-spacing: 0%;
      }

      img {
        width: 15.8em; /* 316px;*/
        height: 15.3em; /* 306px;*/
      }
    }
  }
}
</style>
