<h2 class="np-card-heading">
  <span class="lang-en-US">{% t.header %}</span>
  <span class="lang-es">
    Eventos</span>
  <span class="lang-fr">
    Événements</span>
  <span class="lang-de">
    Ereignisse</span>
  <span class="lang-en-GB">Events</span>
  <span class="lang-nl">
    Eventen</span>
  <span class="lang-pt-BR">
    Eventos</span>
</h2>
<div class="np-flex-column">
  {% for event in course.events %}
    <div class="np-course-events-content-item">
      <div class="np-course-events-content-date np-button-background-color">
        <div class="np-course-events-content-month">
          {{ event.sessions.first.abbreviated_month }}
        </div>
        <div class="np-course-events-content-day">
          {{ event.sessions.first.day }}
        </div>
      </div>
      <div class="np-course-events-content-details">
        <div class="np-course-events-content-name">
          {{ event.title }}
        </div>
        <div class="np-course-events-content-type np-text-light">
          {% t shared.event_types
            , key: event.event_type %}
        </div>
        <div class="np-course-events-content-time np-button-color">
          {{ event.sessions.first.time_period }} {{ event.sessions.first.time_zone }}
        </div>
      </div>
    </div>
  {% endfor %}
</div>