<div class="np-dashboard-resources">
  {% if training_events.available.any? %}
    <div class="webinars-wrapper">
      {% for training_event in training_events.available %}
        <div class="webinar-container">
          {% include "cards_training_event" with training_event %}
        </div>
      {% endfor %}
    </div>
  {% else %}
    {% include "training_events_zero_state" %}
  {% endif %}
</div>

<style>
  .webinars-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
</style>