<section class="homepage-topics np-max-width np-subpage-container"> 
  <div class="row">
    <div class="col-xs-12">
      <div class="np-section-header">Explore Courses by Category</div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12">
      <div class="category-cards">
        {% for category in categories.in_catalog %}
          {% assign category_name = category.name | downcase %}
          {% if category_name != "featured" and category_name != "articles" %}
            {% assign cat_image = "" %}

            {% if category_name == "customer perception" %}
              {% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-customer-perception.png" %}
            {% elsif category_name == "shopper behavior" %}
              {% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-shopper-behavior.png" %}
            {% elsif category_name == "insights dashboard" %}
              {% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-insights-dashboard.png" %}
            {% elsif category_name == "report builder" %}
              {% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-report-builder.png" %}
            {% elsif category_name == "apis" %}
              {% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-apis.png" %}
            {% elsif category_name == "know your store" %}
              {% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-knowyourstore.png" %}
            {% elsif category_name == "metrics" %}
              {% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-metrics.png" %}
            {% elsif category_name == "channel performance" %}
              {% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-channel-performance.png" %}
            {% elsif category_name == "know your customer" %}
              {% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-knowyourcustomer.png" %}
            {% elsif category_name == "advanced" %}
              {% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-advanced.png" %}
            {% elsif category_name == "beginner" %}
              {% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-beginner.png" %}
            {% endif %}

            <a href="/app/catalog?filter%5Bcategory_uuid%5D%5Bin%5D%5B%5D={{category.id}}" class="category-card">
              {% comment %} {% if cat_image %}
                <img class="category-card-image" src="{{cat_image}}" />
              {% endif %} {% endcomment %}
              {% comment %} <div class="category-card-content">
                {{category.name}}
              </div>            {% endcomment %}
              {{category.name}}
            </a>
          {% endif %}
        {% endfor %}
      </div>     
    </div>
  </div>
</section>

<style>
  .homepage-topics {
    padding: 0 16px;
  }

  .category-cards {
    display:flex;
    flex-wrap:wrap;
  }

  .category-card {
    border-radius:30px;
    border:2px solid #3c228a;
    background-color: #3c228a;
    color: #fff;
    width:100%;
    text-decoration: none;
    overflow: hidden;
    text-align:center;
    margin-bottom:16px;
    padding:16px;
    font-weight:700;
    transition:all 0.2s;
  }

  .category-card:hover {
    background-color: #13014a;
  }

  .category-card-image {
    max-width:80px;
  }

  .category-card-content {
    padding: 16px;
  }

  @media (min-width:500px) {
    .category-card {
      width:calc(50% - 16px);
      margin:0 16px 32px;
    }

    .category-card:nth-child(odd) {
      margin-left:0;
    }

    .category-card:nth-child(even) {
      margin-right:0;
    }
  }

  @media (min-width:768px) {
    .category-card {
      width:calc(33.33% - 22px);
    }

    .category-card:nth-child(even),
    .category-card:nth-child(odd) {
      margin:0 16px 32px;
    }

    .category-card:nth-child(3n+1) {
      margin-left:0;
    }

    .category-card:nth-child(3n+3) {
      margin-right:0;
    }
  }

  @media (min-width:992px) {
    .category-card {
      width:calc(25% - 24px);
    }

    .category-card:nth-child(3n+3) {
      margin-right:16px;
    }

    .category-card:nth-child(3n+1) {
      margin-left:16px;
    }
    
    .category-card:nth-child(4n+1) {
      margin-left:0;
    }

    .category-card:nth-child(4n+4) {
      margin-right:0;
    }

  }
</style>