{% include "header" %}
<main class="np-main np-search np-subpage-container np-max-width">
  <div class="np-resource-title">
    {% t .title %}
  </div>
  <div class="np-search-header">
    <div class="np-resource-subtitle">
      {% t .showing %}
      <span class="np-resource-subtitle-number">{{ results.count }}</span>
      {% t .results_for %}
      <span class="np-button-color">"{{ results.term }}"</span>
    </div>
    {% capture label %}{% t shared.filters.by_type %}{% endcapture %}
    {%
      include "filter_dropdown",
      filters: results.filters,
      key: "type",
      label: label
    %}
  </div>
  {% if results.items.any? %}
    {% render "search_result" for results.items as result %}
  {% else %}
    {% include "search_zero_state" %}
  {% endif %}
</main>
{% include "footer" %}

<style>

.np-search-result {
  height: auto;
  min-height: auto;
}

.np-search-result a {
	text-decoration: none;
}
.np-search-result .np-card-content {
	flex-direction: row;
  padding:0;
}
.np-search-result-snippet {
	overflow: hidden;
	font-size: 1rem;
	line-height: 1.5rem;
}

.np-search-result-image {
  margin-right:12px;
}

@media (min-width:768px) {
  .np-search-result-image {
    margin-right:24px;
  }
}
</style>