{{#get "posts" filter="primary_tag:features+featured:true" limit="3"}}
  <div class="relative bg-gray-50 dark:bg-gray-900 py-10">

    <div class="w-default mt-20 my-0 grid grid-cols-1 lg:grid-cols-2 gap-10 mb-10">
      <div class="relative border-l-4 dark:border-gray-700">
        <h2 class="text-4xl pl-5 mb-5 font-bold text-blue-600">Why
          Speckle?</h2>
        <p class=" pl-5 text-lg text-gray-800 dark:text-gray-400">
          Our platform enables AEC companies to evolve
          digitally in a cloud based environment. Speckle
          streamlines collaboration and automation for 3D
          information - <b>CAD & BIM</b>.
        </p>
      </div>
    </div>

    {{!-- NOTE: starts from one to leave space for a future "first" image generic --}}
    <div x-data="{ activeSlide: '1', slides: [ '0', '1', '2', '3', '4', '5' ] }"
      class="w-default my-0 mt-5 mb-20 grid grid-cols-1 lg:grid-cols-2 gap-10">

      <div class="relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4 lg:gap-2 grid-flow-row">
        {{#foreach posts}}

          <div class="rounded-lg transition overflow-hiddenbg-white dark:bg-gray-900 dark:hover:bg-gray-800 shadow hover:shadow-2xl dark:text-gray-200"
            @mouseenter="activeSlide='{{@number}}';">
            <div class="flex-shrink-0 lg:hidden">
              <img class="h-48 w-full object-cover" srcset="{{img_url feature_image size="s"}} 300w,
                        {{img_url feature_image size="m"}} 600w,
                        {{img_url feature_image size="l"}} 1000w,
                        {{img_url feature_image size="xl"}} 2000w"
                sizes="(max-width: 1000px) 400px, 700px"
                src="{{img_url feature_image size="m"}}"
                alt="{{title}}">
            </div>
            <div class="flex-1 px-6 py-4 flex flex-col justify-between">
              <div class="flex-1">
                <a href="{{url}}" class="block mt-1">
                  <p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
                    {{title}}
                  </p>
                  <p class="mt-2 text-sm text-gray-500 line-clamp-2">
                    {{excerpt}}
                  </p>
                  <footer class="mt-2">
                    <p class="text-base font-semibold text-blue-500">
                      Read More
                    </p>
                  </footer>
                </a>
              </div>
            </div>
          </div>

        {{/foreach}}


        <div class="relative rounded-xl py-5 hover:rounded-2xl shadow hover:shadow-2xl bg-white dark:bg-gray-900 transition overflow-hidden flex" >
          <a href="/features" class="w-full self-center">
            <div class="relative px-6">
              <div class="text-xl font-semibold text-blue-600">
                All Features →
              </div>
            </div>
          </a>
        </div>

      </div>

      <div class="relative hidden lg:flex">

        {{#foreach posts}}
          <div class="absolute inset-0 h-full w-full flex"
            x-show="activeSlide === '{{@number}}'"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 -translate-y-1"
            x-transition:enter-end="opacity-100 translate-y-0"
            x-transition:leave="transition ease-in duration-50"
            x-transition:leave-start="opacity-100 translate-y-0"
            x-transition:leave-end="opacity-0 -translate-y-1">
            <img src="{{feature_image}}" class="object-cover self-center">
          </div>
        {{/foreach}}

      </div>

    </div>
  </div>
{{/get}}