<div class="grid-container article-section">
  <div class="grid-full mb-8">
    <div class="mb-4">
      <h3 class="head-7xl mb-4 xl:hidden">Červenec</h3>
      <div class="flex flex-col justify-between xl:flex-row">
        <div class="xl:pt-8">
          {{> molecules-work-article-preview }}
          {{> molecules-work-article-preview }}
        </div>
        <div class="relative border border-violet-400 mx-8 hidden xl:block">
          <div class="absolute bg-violet-400  p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">
            Červenec
          </div>
        </div>
        <div class="xl:pt-14">
          {{> molecules-work-article-preview }}
          {{> molecules-work-article-preview }}
        </div>
      </div>
    </div>
    <div class="mb-4">
      <h3 class="head-7xl mb-4 xl:hidden">Srpen</h3>
      <div class="flex flex-col justify-between xl:flex-row">
        <div class="xl:pt-8">
          {{> molecules-work-article-preview }}
          {{> molecules-work-article-preview }}
        </div>
        <div class="relative border border-violet-400 mx-8 hidden xl:block">
          <div class="absolute bg-violet-400  p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">
            Srpen
          </div>
        </div>
        <div class="xl:pt-14">
          {{> molecules-work-article-preview }}
          {{> molecules-work-article-preview }}
        </div>
      </div>
    </div>
    <div class="flex justify-center">
      {{> atoms-button-animated(btn-text: "Zobrazit další", classes-btn-hidden: "bg-black") }}
    </div>
  </div>
</div>