How to make cards' height equal when using react-slick

Question

I am trying to implement products card slider using react-slick slider.

The problem is when product card has longer title or description, heights of cards are not the same. Is there any way to match height without setting fixed height on card?

export default function App() {
  const settings = {
    infinite: false,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 4,
    initialSlide: 0,
    arrows: true
  };
  return (
    <div className="App">
      <Slider {...settings}>
        {items.map((item, index) => (
          <Card key={index} item={item} />
        ))}
      </Slider>
    </div>
  );
}

import React from "react";
import styled from "styled-components";

const Card = ({ item }) => {
  return (
    <CardContainer>
      <CardImage url={item.image} />
      <CardContent>{item.title}</CardContent>
    </CardContainer>
  );
};

export default Card;

const CardContainer = styled.div`
  border: 1px solid crimson;
`;

const CardImage = styled.div`
  background-image: url(${({ url }) => url});
  background-color: #f5f5f5;
  aspect-ratio: 1 / 1;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const CardContent = styled.div`
  padding: 16px;
`;

I need your help!! Link to CodeSandbox