event v2 - past items listing

  <h2 class="event-heading">Past Items</h2>
  {% for item in past_items %}
    <article class="event-item past-item">
        <div class="event-date-time">
            <time datetime="2024-09-25" class="event-date">{{ item.event_date|datetimeformat('%B %d, %Y') }}</time>
            <p class="event-time">{{ item.event_date|datetimeformat('%H:%M') }}</p>
        </div>
        <div class="event-content">
            <h2 class="event-title">{{ item.event_title }}</h2>
            <div class="event-tags">
                <span class="event-tag event-tag-blue">Upcoming Webinars</span>
                <span class="event-tag event-tag-green">Finance</span>
            </div>
            <p class="event-description">Gain valuable insights into best practices for securing your office, users, and application access and benefit from the experiences ...</p>
            <a href="#" class="event-button" aria-label="{{ item.event_title }}">
                <span>Register Now!</span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-green" aria-hidden="true">
                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                    <line x1="16" y1="2" x2="16" y2="6"></line>
                    <line x1="8" y1="2" x2="8" y2="6"></line>
                    <line x1="3" y1="10" x2="21" y2="10"></line>
                </svg>
            </a>
        </div>
        <div class="event-location">
            <p class="event-country">{{ item.event_country }}</p>
        </div>
    </article>
  {% endfor %}