{{! Twitter Feed }}
<section class="pt-4 pb-16 lg:pt-5 lg:pb-44">
  <div class="mx-auto max-w-[1320px] bg-social-twitter pt-14 pb-16 md:pt-20 md:pb-28 lg:pt-24 lg:pb-32">
    <div class="container">

      {{! Twitter }}
      <div>
        {{! Section Heading }}
        <div class="mb-10 md:mb-12 lg:mb-16 xl:mb-20 flex flex-col gap-y-6 sm:flex-row sm:justify-between sm:items-center">
          <div class="flex gap-x-6 lg:gap-x-8 items-center justify-between sm:justify-start">
            <h2
              class="text-2.5xl font-bold tracking-tighter text-white before:text-accent before:content-['.'] sm:text-3.5xl md:text-4xl lg:text-[62px] lg:leading-none"
            >
              Twitter Feed
            </h2>

            {{! Prev/Next }}
            <div class="flex gap-x-3">
              <div
                class="js-vv-twitter-feed-swiper-btn-prev flex w-8 aspect-square items-center justify-center text-white hover:cursor-pointer hover:text-accent"
              >
                <svg class="h-2.5 w-1.5" fill="currentColor">
                  <use xlink:href="{{root}}assets/img/str1/sprite.svg#arrow-left-pixel-alt"></use>
                </svg>
              </div>
              <div
                class="js-vv-twitter-feed-swiper-btn-next flex w-8 aspect-square items-center justify-center text-white hover:cursor-pointer hover:text-accent"
              >
                <svg class="h-2.5 w-1.5" fill="currentColor">
                  <use xlink:href="{{root}}assets/img/str1/sprite.svg#arrow-right-pixel-alt"></use>
                </svg>
              </div>
            </div>
            {{! Prev/Next / End }}
          </div>

          {{#> _str1-btn
            variant="outline-white"
            size="lg"
            px="px-7 lg:px-16"
          }}
            <svg class="h-[14px] w-[14px]" fill="currentColor">
              <use xlink:href="{{root}}assets/img/social-icons.svg#twitter"></use>
            </svg>
            Follow Me!
          {{/_str1-btn}}
        </div>
        {{! Section Heading / End }}

        {{! Twitter Feed }}
        <div
          class="swiper js-vv-twitter-feed-swiper pt-1"
        >

          {{! Slider required wrapper }}
          <div class="swiper-wrapper">
            {{! Slides }}
            {{#each str1.twitter-feed}}
              <div class="swiper-slide">

                <div class="text-white">
                  {{! Tweet Header }}
                  <div class="flex gap-x-4 items-center mb-5">
                    <figure class="overflow-hidden rounded-full shrink-0">
                      <img src="{{root}}{{author.thumb}}" alt="{{author.name}}" />
                    </figure>
                    <div class="leading-tight font-bold">
                      <div class="text-1.5xl"><a href="#">{{author.name}}</a></div>
                      <div><a href="#">{{author.nickname}}</a></div>
                    </div>
                  </div>
                  {{! Tweet Header / End }}
                  {{! Tweet Content }}
                  <div class="[&_a]:text-accent [&_a]:font-bold hover:[&_a]:text-white [&_a]:transition-colors leading-[26px] mb-5">
                    {{{content}}}
                  </div>
                  {{! Tweet Content / End }}
                  {{! Tweet Date }}
                  <div class="text-sm">
                    <time datetime="2023-01-15 21:30">{{date}}</time>
                  </div>
                  {{! Tweet Date / End }}
                </div>

              </div>
            {{/each}}
            {{! Slides / End }}
          </div>
          {{! Slider required wrapper / End }}

        </div>
        {{! Twitter Feed / End }}

      </div>
      {{! Twitter / End }}

    </div>
  </div>
</section>
{{! Twitter Feed / End }}