Instacart, while still in implementation, came to their AE (J.Jones) with some access issues. Some of these templates don't work yet (internal server errors) but backing them up just in case

Custom_Templates/customer_templates/Instacart/_courses_carousel.html.liquid

@@ -0,0 +1,125 @@
+<style>
+  .course-carousel-container .catalog-card:not(:first-child) {
+    display: none;
+  }
+  .course-carousel-container .catalog-card {
+    visibility: hidden;
+  }
+</style>
+
+
+{% assign filterInProgress = filterInProgress | default: false %}
+{% assign sortByPriority = sortByPriority | default: false %}
+{% assign displayedCount = 0 %}
+
+{% if items.any? %}
+  <div class="course-carousel-container">
+    {% for course in items %}
+      {% if filterInProgress %}
+        {% if course.progress > 0 and course.progress < 100 %}
+          {% include "cards_course" with course %}
+          {% assign displayedCount = displayedCount | plus: 1 %}
+        {% endif %}
+      {% else %}
+        {% include "cards_course" with course
+          , hiddenByDefault: false %}
+        {% assign displayedCount = displayedCount | plus: 1 %}
+      {% endif %}
+    {% endfor %}
+  </div>
+  {% if displayedCount == 0 %}
+    {% include "courses_zero_state"
+      , message: 'Nothing found! Start some lessons to fill this gap.'
+      , messageEs: '¡Nada encontrado! Comienza algunas lecciones para llenar este vacío.' %}
+  {% endif %}
+{% else %}
+  {% capture message %}
+    {% t shared.zero_state.courses.index,
+      key: current_school.course_vocabulary
+    %}
+  {% endcapture %}
+  {% include "courses_zero_state"
+    , message: message %}
+{% endif %}
+
+<script>
+   const coursesCarousel = $('.course-carousel-container');
+
+  $(document).ready(function(){
+  const maxItems = 5;
+  const cards = coursesCarousel.find('.catalog-card').get();
+
+  {% if sortByPriority %}      
+
+  cards.sort(function(a, b) {
+  const aPriority = extractPriority(a);
+  const bPriority = extractPriority(b);
+  return bPriority - aPriority;
+  });
+
+  // Re-append sorted cards to container
+  $.each(cards, function(index, card) {
+  coursesCarousel.append(card);
+  });
+
+  {% endif %}
+
+  for(let i = 5; i < cards.length; i++) {
+  cards[i].remove();
+  }
+
+  let initialSlide = 0;
+
+  // Go to 2nd slide if width is higher than breakpoint
+  if ($(window).width() > {{breakpoint}}) {
+    initialSlide = 1;
+  }
+
+  coursesCarousel.slick({
+  centerMode: true,
+  dots: false,
+  infinite: false,
+  speed: 300,
+  slidesToShow: 2,
+  slidesToScroll: 1,
+  initialSlide: initialSlide,
+  responsive: [
+  {
+    breakpoint: {{breakpoint}},
+    settings: {
+      slidesToShow: 1,
+      slidesToScroll: 1
+    }
+  }
+  ]
+  });
+
+  for (let i = 0; i < 5; i++) {
+      cards[i].classList.add('card-visible');
+  }
+
+  // Redirect to slide 1 if user slides to slide 0 above breakpoint
+  setInterval(function() {
+    if ($(window).width() > {{breakpoint}}) {
+      const currentSlide = coursesCarousel.slick('slickCurrentSlide');
+      if (currentSlide === 0) {
+        console.log('redirecting from slide 0 to slide 1');
+        coursesCarousel.slick('slickGoTo', 1);
+      }
+    }
+  }, 100);
+  });
+
+  function extractPriority(element){
+    const priority = $(element).attr('priority');
+    return priority ? Number(priority) : 0;
+  }
+</script>
+
+<style>
+  @media (max-width: {{breakpoint}}px) {
+    .course-carousel-container .catalog-card {
+      margin: 0 10px 32px;
+    }
+  }
+</style>