Equal-Height Card Grid

/* Equal-height card grid */

.card-grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
    gap: 1.5rem;
    align-items: stretch;
}

/* Each card stretches to row height and stacks its children vertically */
.card-grid .card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

/* Optional fixed-ratio image at the top of the card */
.card-grid .card__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.card-grid .card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Body fills available height so the footer is pushed to the bottom */
.card-grid .card__body {
    flex: 1;
    padding: 1.25rem;
}

/* Footer sticks to the card bottom regardless of content length */
.card-grid .card__footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    margin-top: auto;
}