<div class="np-homepage-featured-text">
  <div class="homepage-headline">
    {{ homepage.featured_courses_headline }}
  </div>
  <div class="homepage-subheadline">
    {{ homepage.featured_courses_subheadline }}
  </div>
</div>

<div class="np-stretch-content category-gallery col-xs-12 row" >
  {% assign categories = current_school.filterable_categories | reverse %}

  {% for category in categories %}
    {% if category.name == 'POST' %}
      <div class="topic-button-wrapper col-xs-12 col-sm-3-6">
        <a class="np-button np-button-secondary topic-button" href="/app/catalog?filter[category_uuid][in][]={{category.id}}" style="background: url(https://s3.amazonaws.com/static.northpass.com/futuri/POSTnew.png); background-size: cover;">
        </a>
      </div>
    {% elsif category.name == 'Prep+' %}
      <div class="topic-button-wrapper col-xs-12 col-sm-3-6">
        <a class="np-button np-button-secondary topic-button" href="/app/catalog?filter[category_uuid][in][]={{category.id}}" style="background: #FAE202 !important">
          {{ category.name }}
        </a>
      </div>
    {% elsif category.name == 'TopicPulse' or category.name == 'TopicPulse Content Advantage' %}
      <div class="topic-button-wrapper col-xs-12 col-sm-3-6" >
        <a class="np-button np-button-secondary topic-button" href="/app/catalog?filter[category_uuid][in][]={{category.id}}" style="background: url(https://s3.amazonaws.com/static.northpass.com/futuri/TPnew.png); background-size: cover;">
        </a>
      </div>
    {% elsif category.name == 'TopLine' %}
      <div class="topic-button-wrapper col-xs-12 col-sm-3-6">
        <a class="np-button np-button-secondary topic-button" href="/app/catalog?filter[category_uuid][in][]={{category.id}}" style="background: url(https://s3.amazonaws.com/static.northpass.com/futuri/TLnew.png); background-size: cover;">
        </a>
      </div>
    {% elsif category.name == 'Futuri Mobile' %}
      <div class="topic-button-wrapper col-xs-12 col-sm-3-6">
        <a class="np-button np-button-secondary topic-button" href="/app/catalog?filter[category_uuid][in][]={{category.id}}" style="background: #41C0C0 !important">
          {{ category.name }}
        </a>
      </div>
    {% elsif category.name == 'Futuri Streaming' %}
      <div class="topic-button-wrapper col-xs-12 col-sm-3-6">
        <a class="np-button np-button-secondary topic-button" href="/app/catalog?filter[category_uuid][in][]={{category.id}}" style="background: #F2CC2B !important">
          {{ category.name }}
        </a>
      </div>
    {% elsif category.name == 'Futuri Voice' %}
      <div class="topic-button-wrapper col-xs-12 col-sm-3-6">
        <a class="np-button np-button-secondary topic-button" href="/app/catalog?filter[category_uuid][in][]={{category.id}}" style="background: #F9811E !important">
          {{ category.name }}
        </a>
      </div>
    {% elsif category.name == 'SpotOn' %}
      <div class="topic-button-wrapper col-xs-12 col-sm-3-6">
        <a class="np-button np-button-secondary topic-button" href="/app/catalog?filter[category_uuid][in][]={{category.id}}" style="background: url(https://s3.amazonaws.com/static.northpass.com/futuri/SPOTONnew.png); background-size: cover;">
        </a>
      </div>
    {% elsif category.name contains 'RadioGPT' %}
      <div class="topic-button-wrapper col-xs-12 col-sm-3-6">
        <a class="np-button np-button-secondary topic-button" href="/app/catalog?filter[category_uuid][in][]={{category.id}}" style="background: url(https://s3.amazonaws.com/static.northpass.com/futuri/GPT.png); background-size: cover;">
        </a>
      </div>
    {% elsif category.name contains 'Futuri AudioAI™' %}
        <div class="topic-button-wrapper col-xs-12 col-sm-3-6">
          <a class="np-button np-button-secondary topic-button" href="/app/catalog?filter[category_uuid][in][]={{category.id}}" style="background: url(https://s3.amazonaws.com/static.northpass.com/futuri/Audio_AI.png); background-size: cover;">
          </a>
        </div>
    {% else %}
      <div class="topic-button-wrapper col-xs-12 col-sm-3-6">
        <a class="np-button np-button-secondary topic-button" href="/app/catalog?filter[category_uuid][in][]={{category.id}}" style="background: #7D388E !important">
          {{ category.name }}
        </a>
      </div>
    {% endif %}
  {% endfor %}
</div>