{% include "header" %}
<main class="np-main np-search np-subpage-container np-max-width">
  <div class="np-resource-title">
    {% t .title %} for "{{ results.term }}"
  </div>
  
  {% if training_events.available.any? %} 
    <div class="row row-with-thumbnails" style="border-bottom:1px solid #C7D0D9; margin-bottom: 60px;">
      <div class="np-resource-title vt-title">Upcoming Live Group Trainings</div>
      {% for training_event in training_events.available %}
        <div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
          {% include "cards_training_event" with training_event %}
        </div>
      {% endfor %}
    </div>
    <div class="np-resource-title">More results</div>
  {% endif %}
  <div class="bt-search-results">
  {% if results.items.any? %}
    {% render "search_result" for results.items as result %}
  {% else %}
    {% include "search_zero_state" %}
  {% endif %}
  </div>
  
</main>
{% include "footer" %}
<style>
  .bt-search-results{
    display: flex;
    flex-wrap: wrap;
  }
  .np-search-result-title{
    color: #202227;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    width: 100%;
  }
  .np-search .np-resource-subtitle{
    color: #202227;
    font-size: 20px;
  }
  .vt-title{
    width: 100%;
    margin: 40px 16px 0;
    padding-bottom: 32px;
  }
  @media screen and (min-width: 768px) {
    .np-search-result{
      height: auto;
        margin-bottom: 16px;
        min-width: auto;
        min-height: auto;
    }
    .bt-search-results .np-card-container{
    box-shadow: none;
    padding: 16px;
  }
  .bt-search-results .np-card-content{
    flex-direction: column;
    padding:0;
  }
  .bt-search-results .np-search-result-image{
    width: 100%;
    height: auto;
    margin:0 auto;
  }
  
}
</style>