<div
  class="
    relative
    w-full
    max-w-6xl
    mx-auto
    grid
    ptablet:grid-cols-2
    ltablet:grid-cols-3
    lg:grid-cols-3
    gap-[6rem]
    md:gap-6
    pt-20
    pb-6
  "
>
  <!--Grid item-->
  <div
    class="
      p-5
      bg-white
      dark:bg-muted-800
      border border-muted-200
      dark:border-muted-700
      rounded-xl
      shadow-xl shadow-muted-400/10
      dark:shadow-muted-800/10
    "
  >
    <div
      class="
        relative
        w-full
        h-52
        rounded-xl
        mb-2
        bg-primary-100
        dark:bg-primary-500/10
      "
    >
      <!--Clipart-->
      <img
        src="/img/clipart/2.png"
        class="
          block
          absolute
          bottom-0
          inset-x-0
          mx-auto
          object-contain
          max-w-[250px]
        "
        alt="Card image"
        width="250"
        height="300"
      />
      <!--Flag-->
      <div
        class="
          absolute
          -bottom-6
          right-6
          w-12
          h-12
          flex
          items-center
          justify-center
          rounded-full
          bg-white
          dark:bg-muted-800
        "
      >
        <img
          class="block w-10 h-10 rounded-full object-cover"
          src="/img/flags/united-states-of-america.svg"
          alt="flag"
          width="40"
          height="40"
        />
      </div>
    </div>
    <!--Content-->
    <div>
      <h4
        class="
          font-heading font-semibold
          text-lg text-muted-800
          dark:text-muted-100
        "
      >
        Lindsey Taylor
      </h4>
      <p class="font-sans text-sm text-muted-400">Fullstack developer</p>

      <p class="font-sans text-sm text-muted-500 dark:text-muted-300 py-4">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid est
        igitur, inquit, quod requiras.
      </p>

      <div class="flex items-center justify-between">
        <!--Skills-->
        <div class="flex items-center gap-2">
          <div
            class="
              w-10
              h-10
              flex
              items-center
              justify-center
              rounded-full
              bg-muted-100
              dark:bg-muted-700
            "
          >
            <i
              class="iconify w-6 h-6 text-rose-500"
              data-icon="ph:angular-logo-fill"
            ></i>
          </div>
          <div
            class="
              w-10
              h-10
              flex
              items-center
              justify-center
              rounded-full
              bg-muted-100
              dark:bg-muted-700
            "
          >
            <i class="iconify w-5 h-5 text-sky-500" data-icon="mdi:react"></i>
          </div>
          <div
            class="
              w-10
              h-10
              flex
              items-center
              justify-center
              rounded-full
              bg-muted-100
              dark:bg-muted-700
            "
          >
            <i
              class="iconify w-5 h-5"
              data-icon="vscode-icons:file-type-csharp2"
            ></i>
          </div>
        </div>
        <!--Experience-->
        <div class="flex items-center gap-x-2">
          <i
            class="iconify w-5 h-5 text-muted-400"
            data-icon="ph:timer-duotone"
          ></i>
          <span class="font-sans text-sm text-muted-500 dark:text-muted-300">
            5 years of Exp.
          </span>
        </div>
      </div>
    </div>
  </div>
  <!--Grid item-->
  <div
    class="
      p-5
      bg-white
      dark:bg-muted-800
      border border-muted-200
      dark:border-muted-700
      rounded-xl
      shadow-xl shadow-muted-400/10
      dark:shadow-muted-800/10
    "
  >
    <div
      class="
        relative
        w-full
        h-52
        rounded-xl
        mb-2
        bg-yellow-100
        dark:bg-yellow-500/10
      "
    >
      <!--Clipart-->
      <img
        src="/img/clipart/3.png"
        width="250"
        height="300"
        class="
          block
          absolute
          bottom-0
          inset-x-0
          mx-auto
          object-contain
          max-w-[250px]
        "
        alt="Card image"
      />
      <!--Flag-->
      <div
        class="
          absolute
          -bottom-6
          right-6
          w-12
          h-12
          flex
          items-center
          justify-center
          rounded-full
          bg-white
          dark:bg-muted-800
        "
      >
        <img
          class="block w-10 h-10 rounded-full object-cover"
          src="/img/flags/spain.svg"
          alt="flag"
          width="40"
          height="40"
        />
      </div>
    </div>
    <!--Content-->
    <div>
      <h4
        class="
          font-heading font-semibold
          text-lg text-muted-800
          dark:text-muted-100
        "
      >
        Manuel Jimenez
      </h4>
      <p class="font-sans text-sm text-muted-400">Frontend developer</p>

      <p class="font-sans text-sm text-muted-500 dark:text-muted-300 py-4">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid est
        igitur, inquit, quod requiras.
      </p>

      <div class="flex items-center justify-between">
        <!--Skills-->
        <div class="flex items-center gap-2">
          <div
            class="
              w-10
              h-10
              flex
              items-center
              justify-center
              rounded-full
              bg-muted-100
              dark:bg-muted-700
            "
          >
            <i
              class="iconify w-5 h-5 text-emerald-500"
              data-icon="teenyicons:vue-solid"
            ></i>
          </div>
          <div
            class="
              w-10
              h-10
              flex
              items-center
              justify-center
              rounded-full
              bg-muted-100
              dark:bg-muted-700
            "
          >
            <i class="iconify w-5 h-5 text-sky-500" data-icon="mdi:react"></i>
          </div>
          <div
            class="
              w-10
              h-10
              flex
              items-center
              justify-center
              rounded-full
              bg-muted-100
              dark:bg-muted-700
            "
          >
            <i
              class="iconify w-5 h-5 text-orange-600"
              data-icon="simple-icons:svelte"
            ></i>
          </div>
        </div>
        <!--Experience-->
        <div class="flex items-center gap-x-2">
          <i
            class="iconify w-5 h-5 text-muted-400"
            data-icon="ph:timer-duotone"
          ></i>
          <span class="font-sans text-sm text-muted-500 dark:text-muted-300">
            5 years of Exp.
          </span>
        </div>
      </div>
    </div>
  </div>
  <!--Grid item-->
  <div
    class="
      ptablet:hidden
      p-5
      bg-white
      dark:bg-muted-800
      border border-muted-200
      dark:border-muted-700
      rounded-xl
      shadow-xl shadow-muted-400/10
      dark:shadow-muted-800/10
    "
  >
    <div
      class="
        relative
        w-full
        h-52
        rounded-xl
        mb-2
        bg-emerald-100
        dark:bg-emerald-500/10
      "
    >
      <!--Clipart-->
      <img
        src="/img/clipart/4.png"
        width="250"
        height="300"
        class="
          block
          absolute
          bottom-0
          inset-x-0
          mx-auto
          object-contain
          max-w-[250px]
        "
        alt="Card image"
      />
      <!--Flag-->
      <div
        class="
          absolute
          -bottom-6
          right-6
          w-12
          h-12
          flex
          items-center
          justify-center
          rounded-full
          bg-white
          dark:bg-muted-800
        "
      >
        <img
          class="block w-10 h-10 rounded-full object-cover"
          src="/img/flags/france.svg"
          alt="flag"
          width="40"
          height="40"
        />
      </div>
    </div>
    <!--Content-->
    <div>
      <h4
        class="
          font-heading font-semibold
          text-lg text-muted-800
          dark:text-muted-100
        "
      >
        Mireille Petit
      </h4>
      <p class="font-sans text-sm text-muted-400">Senior accountant</p>

      <p class="font-sans text-sm text-muted-500 dark:text-muted-300 py-4">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid est
        igitur, inquit, quod requiras.
      </p>

      <div class="flex items-center justify-between">
        <!--Skills-->
        <div class="flex items-center gap-2">
          <div
            class="
              w-10
              h-10
              flex
              items-center
              justify-center
              rounded-full
              bg-muted-100
              dark:bg-muted-700
            "
          >
            <i
              class="iconify w-6 h-6 text-emerald-500"
              data-icon="simple-icons:quickbooks"
            ></i>
          </div>
          <div
            class="
              w-10
              h-10
              flex
              items-center
              justify-center
              rounded-full
              bg-muted-100
              dark:bg-muted-700
            "
          >
            <i
              class="iconify w-5 h-5 text-green-500"
              data-icon="ri:file-excel-2-fill"
            ></i>
          </div>
          <div
            class="
              w-10
              h-10
              flex
              items-center
              justify-center
              rounded-full
              bg-muted-100
              dark:bg-muted-700
            "
          >
            <i
              class="iconify w-5 h-5 text-indigo-600"
              data-icon="ri:file-word-2-fill"
            ></i>
          </div>
        </div>
        <!--Experience-->
        <div class="flex items-center gap-x-2">
          <i
            class="iconify w-5 h-5 text-muted-400"
            data-icon="ph:timer-duotone"
          ></i>
          <span class="font-sans text-sm text-muted-500 dark:text-muted-300">
            5 years of Exp.
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
