<div class="np-homepage-featured-courses row" style="margin-top:32px;">
  <div class="col-xs-12 col-md-10" style="margin:auto">
    <div class="np-homepage-headline">
      Explore eLearning courses by product
    </div>
  </div>

  <div class="col-xs-12 col-md-10" style="margin:auto">
    <div class="products-quick-links-wrapper">
      <a href="/app/customer-success" class="products-quick-link-box cs-box">
        <div class="products-quick-link-content">
          <div class="products-quick-link-icon">
            <i class="fal fa-rocket-launch"></i>
          </div>

          <h3 class="products-quick-link-title gs-light-blue">
            Customer Success
          </h3>
          <div class="products-quick-link-desc">
            eLearning for all of the modules and features in Gainsight Customer Success solution.
          </div>
        </div>
      </a>
      <a href="/app/product-experience" class="products-quick-link-box px-box">
        <div class="products-quick-link-content">
          <div class="products-quick-link-icon">
            <i class="far fa-chart-pie-alt"></i>
          </div>
          <h3 class="products-quick-link-title gs-yellow">
            Product Experience
          </h3>
          <div class="products-quick-link-desc">
            eLearning path supports users in Product Experience installation, configuration, analytics and more
          </div>
        </div>
      </a>
      <a href="/app/customer-communities" class="products-quick-link-box cc-box">
        <div class="products-quick-link-content">
          <div class="products-quick-link-icon">
            <i class="fal fa-thumbs-up"></i>
          </div>
          <h3 class="products-quick-link-title gs-pink">
            Customer Communities
          </h3>
          <div class="products-quick-link-desc">
            eLearning for the Community application
          </div>
        </div>
      </a>
      <a href="/app/customer-education" class="products-quick-link-box ce-box">
        <div class="products-quick-link-content">
          <div class="products-quick-link-icon">
            <i class="far fa-user-graduate"></i>
          </div>
          <h3 class="products-quick-link-title gs-green">
            Customer Education
          </h3>
          <div class="products-quick-link-desc">
            eLearning for the Customer Education platform
          </div>
        </div>
      </a>
    </div>

  </div>
</div>

<style>
  .products-quick-links-wrapper {
    display: flex;
    margin-right: -12px;
    margin-left: -12px;
    flex-wrap: wrap;
    padding: 16px 0;
  }

  .products-quick-link-box {
    background-color: #fff;
    color: #5B6670;
    padding: 24px 32px;
    margin: 12px 16px;
    text-decoration: none;
    width: 100%;
  }

  .products-quick-link-box.cs-box:hover {
    background-color: #48B2EB;
  }

  .products-quick-link-box.px-box:hover {
    background-color: #FCC642;
  }

  .products-quick-link-box.cc-box:hover {
    background-color: #E1266D;
  }

  .products-quick-link-box.ce-box:hover {
    background-color: #8ac147;
  }

  .products-quick-link-box:hover .products-quick-link-title,
  .products-quick-link-box:hover .products-quick-link-icon,
  .products-quick-link-box:hover .products-quick-link-desc {
    color: #fff;
  }

  .products-quick-link-icon {
    font-size: 28px;
  }

  .products-quick-link-title {
    font-size: 20px;
    margin-top: 12px;
    margin-bottom: 16px;
  }

  .products-quick-link-desc {
    line-height: 1.3;
  }

  @media (min-width: 768px) {
    .products-quick-link-box {
      flex: unset;
      width: calc(50% - 32px);
    }
  }
</style>