<div class="carousel-section-wrapper np-max-width" id="commercial-coaching">
  <div class="carousel-header-container reduce-padding">
    <div class="carousel-heading-text">
      Commercial Coaching
    </div>
    <div class="see-all-btn-container">
    </div>
  </div>
  <div class="featured-instructors-carousel np-carousel">
    <div class="np-carousel-card margin-r-5">
      <div class="carousel-card-container">
        <img class="featured_instructors_carousel_image" src="https://s3.amazonaws.com/static.northpass.com/LightHouse-LJHooker/Tom+Donnelly+600x400.png" />
        <div class="card-content-container">
          <div class="instructor-heading">Tom Donnelly</div>
          <div class="instructor-profession">Head of Commercial</div>
          <div class="instructor-desc">
            <div class="specialties-header">Tom specialises in:</div>
            <ul>
              <li>CRE business strategy</li>
              <li>CRE basics</li>
              <li>CRE leasing</li>
              <li>CRE property management</li>
            </ul>
          </div>
          <div class="btn-container">
            <a class="np-button" href="/app/tom-donnelly">Book a Session</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
    $(document).ready(function(){
        $(".featured-instructors-carousel").slick({
            dots: true,
            slidesToShow: 3,
            prevArrow: '<i class="fal fa-chevron-left slick-arrow "></i>',
            nextArrow: '<i class="fal fa-chevron-right slick-arrow"></i>',
            infinite: false,
            responsive: [
      
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 1,
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                    }
                }
            ]
        });
    });
</script>

<style>
  #commercial-coaching.carousel-section-wrapper {
    padding: 100px 24px 0;
  }

  #commercial-coaching .instructor-heading {
    font-size: 1.4rem;
    font-weight: 800;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }

  #commercial-coaching .instructor-profession {
    color: #000;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 0.5rem;
    flex: 1;
  }

  #commercial-coaching .instructor-name {
    color: #276092;
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
  }
  #commercial-coaching .instructor-desc {
    margin-bottom: 32px;
    flex: 4;
  }
  #commercial-coaching .btn-container {
    display: flex;
    justify-content: flex-end;

  }

  #commercial-coaching .featured_instructors_carousel_image {
    width: 100%;
  }

  #commercial-coaching .instructor-profession span {
    color: #000;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    display: block;
  }
</style>