<section class="w-full py-12 px-4 bg-white dark:bg-muted-900">
  <!--Container-->
  <div class="w-full max-w-7xl mx-auto">
    <!--Content-->
    <div class="w-full max-w-4xl mx-auto">
      <div class="flex flex-col sm:flex-row sm:items-center mt-10">
        <!--Column-->
        <div class="sm:w-2/5 text-center sm:pr-8 sm:py-8">
          <div class="relative w-full">
            <img
              class="block w-full rounded-2xl grayscale"
              src="/img/team/1.jpg"
              alt="Team member"
              width="326"
              height="402"
            />
            <!--Emoji-->
            <div
              class="
                absolute
                top-4
                -left-8
                h-16
                w-16
                flex
                items-center
                justify-center
                border border-muted-200
                dark:border-muted-700
                bg-white
                dark:bg-muted-800
                rounded-full
                shadow-xl shadow-muted-400/10
                dark:shadow-muted-800/10
              "
            >
              <span class="text-3xl">👋</span>
            </div>
            <!--Emoji-->
            <div
              class="
                absolute
                top-24
                -left-16
                h-12
                w-12
                flex
                items-center
                justify-center
                border border-muted-200
                dark:border-muted-700
                bg-white
                dark:bg-muted-800
                rounded-full
                -rotate-45
                shadow-xl shadow-muted-400/10
                dark:shadow-muted-800/10
              "
            >
              <span class="text-2xl">😊</span>
            </div>
            <!--Emoji-->
            <div
              class="
                absolute
                bottom-8
                -right-4
                h-14
                w-14
                flex
                items-center
                justify-center
                border border-muted-200
                dark:border-muted-700
                bg-white
                dark:bg-muted-800
                rounded-full
                shadow-xl shadow-muted-400/10
                dark:shadow-muted-800/10
              "
            >
              <span class="text-3xl">🎉</span>
            </div>
          </div>
        </div>
        <!--Column-->
        <div
          class="
            flex
            items-center
            justify-center
            sm:w-3/5 sm:pl-8 sm:py-8 sm:border-l
            border-muted-200
            dark:border-muted-800
            sm:border-t-0
            border-t
            mt-4
            pt-4
            sm:mt-0
            text-center
            sm:text-left
          "
        >
          <div>
            <!--Title-->
            <h3
              class="
                font-heading font-bold
                text-3xl text-muted-800
                dark:text-white
                mb-4
              "
            >
              A word from Adam, our CEO
            </h3>

            <p
              class="
                font-sans
                text-base
                italic
                leading-relaxed
                mb-4
                text-muted-400
                dark:text-muted-500
              "
            >
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit hoc
              ultimum bonorum, quod nunc a me defenditur
            </p>

            <p
              class="
                font-sans
                text-base
                leading-relaxed
                mb-8
                text-muted-500
                dark:text-muted-400
              "
            >
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Neminem
              videbis ita laudatum, ut artifex callidus comparandarum voluptatum
              diceretur. Conferam tecum, quam cuique verso rem subicias; Scio
              enim esse quosdam, qui quavis lingua philosophari possint
            </p>

            <!--Signature-->
            <div class="max-w-[200px] text-primary-400">
              {{> misc/signature}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
