$(".card-slider-slide").slick({
  dots: true,
  arrows: false,
  infinite: false,
  speed: 300,
  slidesToShow: 3,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 1250,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
        infinite: true,
        dots: true,
      },
    },
    {
      breakpoint: 767,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      },
    },
  ],
});

function setEqualHeight() {
  const $parent = $(".card-slider-slide");
  if (!$parent.length) return; // Exit if no parent element is found

  const $imgWraps = $parent.find(".card-slide-img");
  const $contentWraps = $parent.find(".card-slide-content");

  // Only apply equal height for viewport widths of 365px or less
  if ($(window).width() <= 365) {
    let maxHeight = 0;

    // Find the tallest card within .card-slider-slide
    $imgWraps.each(function (index) {
      const $imgWrap = $(this);
      const $contentWrap = $($contentWraps[index]);

      // Reset heights first for accurate calculation
      $imgWrap.css("height", "auto");
      $contentWrap.css("height", "auto");

      // Get the computed height of both elements and find the maximum height
      const imgWrapHeight = $imgWrap.outerHeight();
      const contentWrapHeight = $contentWrap.outerHeight();
      maxHeight = Math.max(maxHeight, imgWrapHeight, contentWrapHeight);
    });

    // Set max height as a custom property
    $parent.css("--equal-height", `${maxHeight}px`);
    $parent.addClass("equal-height"); // Add the class to apply equal height
  } else {
    // Reset styles when the viewport is larger than 365px
    $parent.removeClass("equal-height"); // Remove the class
    $parent.css("--equal-height", ""); // Remove the custom property
  }
}

// Run on page load and on window resize
$(window).on("load resize", setEqualHeight);