{% assign available_categories = 'Introduction to Walmart,Onboarding,Merchandising,Supply Chain,Getting Paid' %}
{% assign uniq_cats = '' %}

<div class="categories-wrapper">
    <a class="category-item" href="#Introduction to Walmart" onclick="expandSection('Introduction to Walmart')">
        <div class="category-item-image-container">
            <img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/WTW+Images/W2W+Icons+2-01.png" alt="" class="category-item-image">
        </div>
        <div class="category-item-title">
            Introduction to Walmart
        </div>
    </a>
    <a class="category-item" href="#Onboarding" onclick="expandSection('Onboarding')">
        <div class="category-item-image-container">
            <img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/WTW+Images/W2W+Icons-01.png" alt="" class="category-item-image">
        </div>
        <div class="category-item-title">
            Onboarding
        </div>
    </a>
    <a class="category-item" href="#Merchandising" onclick="expandSection('Merchandising')">
        <div class="category-item-image-container">
            <img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/WTW+Images/GroceryBag_Circle_Blue.png" alt="" class="category-item-image">
        </div>
        <div class="category-item-title">
            Merchandising
        </div>
    </a>
    <a class="category-item" href="#Supply Chain" onclick="expandSection('Supply Chain')">
        <div class="category-item-image-container">
            <img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/WTW+Images/Truck_Spark_Circle_LightBlue.png" alt="" class="category-item-image">
        </div>
        <div class="category-item-title">
            Supply Chain
        </div>
    </a>
    <a class="category-item" href="#Getting Paid" onclick="expandSection('Getting Paid')">
        <div class="category-item-image-container">
            <img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/WTW+Images/DollarSignCircle_Shine_Circle_Gray.png" alt="" class="category-item-image">
        </div>
        <div class="category-item-title">
            Getting Paid
        </div>
    </a>
</div>

<style>
.category-item {
    max-width: 175px;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}
.category-item-image {
  width: 100%;
}
.category-item-title {
    color: #fff;
    font-weight: 600;
    margin-top: 15px;
    font-size: 1.25rem;
    text-align: center;
}
.categories-wrapper {
display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}
</style>