<div class="np-dashboard-resources">
  {% if training_events.available.any? %}
    <div class="row row-with-thumbnails">
      {% for training_event in training_events.available %}
        <div class="col-xs-12 col-sm-6 col-lg-4 event-card">
          {% include "cards_training_event" with training_event %}
        </div>
      {% endfor %}
    </div>
  {% else %}
    {% include "training_events_zero_state" %}
  {% endif %}
</div>
<style>
  .event-card {
    padding: 1rem 3rem;
  }
  @media screen and (max-width: 1450px) {
    .event-card {
      padding: 1rem 2rem;
    }
  }
  @media screen and (max-width: 768px) {
    .event-card {
      display: flex;
      justify-content: center;
      padding: 0.5rem 0;
    }
  }
  @media screen and (max-width: 500px) {
    .event-card {
      padding: 0.5rem 1rem;
    }
  }
  @media screen and (max-width: 350px) {
    .event-card {
      padding: 0.5rem 0.5rem;
    }
  }
  
</style>
