Build a polished card with CSS variables for theming, aspect-ratio for the image, -webkit-line-clamp for text truncation, flexbox for the body layout, and a translateY hover lift with box-shadow transition.
Polished Card Component
.card {
--card-radius: 12px;
--card-shadow: 0 4px 20px rgba(0,0,0,0.08);
background: white;
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr auto;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.card__image {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
.card__body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.card__title {
font-size: 1.2rem;
font-weight: 700;
color: #111827;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card__footer {
padding: 1rem 1.5rem;
border-top: 1px solid #f3f4f6;
display: flex;
justify-content: space-between;
align-items: center;
}