Pattern Library

<article
  class="min-w-[calc(100vw_-_2.5rem)] lg:min-w-[24rem] flex flex-col min-h-[600px] {{ classes }}"
>
  <a href="{{ url }}">
    <img src="{{ image }}" alt="{{ header }}" draggable="false" class="w-full h-[17rem] object-cover">
  </a>
  <div class="p-6 bg-white text-black {{ description_classes }} h-full flex flex-col justify-between">
    <div class="mb-6">
      {% if date %}
        <div class="text-xl text-grey-350 mb-2">
          {{ date }}
        </div>
      {% endif %}

      <div class="flex flex-col mt-3 gap-3 justify-between mt-auto">
        <h2 class="font-alt text-4xl">
          <a href="{{ url }}" class="underline-offset-4">
            {{ header }}
          </a>
        </h2>

        <p class="text-black text-lg">
          {{ content }}
        </p>
      </div>
    </div>

    <div class="flex justify-center">
      {% include 'patterns/atoms/buttons/round_button.html' with button_text=button_text %}
    </div>
  </div>
</article>