<div class="learning-paths-wrapper-homepage">
    {% if items.any? %}
      {% for learning_path in items %}
        {% include "cards_learning_path_homepage" with learning_path %}
      {% endfor %}
    {% else %}
      <div class="np-learning-paths-resources-container">
        <div class="np-zero-state-text">
          {% t .empty %}
        </div>
        <img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
      </div>
    {% endif %}
</div>
  
<style>
.learning-paths-wrapper-homepage {
    flex-direction: row;
    display: flex;
    width: 100%;
    height: 100%;
}
@media only screen and (max-width: 900px) {
    .learning-paths-wrapper-homepage  {
      flex-direction: column;
    }
}
</style>