.card-img-top {
    height: 200px;             /* or auto for dynamic sizing */
    object-fit: cover;       /* shows full image without crop */
}

.card-image-wrapper {
    position: relative;
}

.card-image-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: white;
    padding: 8px 12px;
    font-weight: bold;
    z-index: 10;
    /* Optional: you can add border-radius for rounded corners */
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}

.card-badge {
    position: absolute;
    bottom: 10px;    /* distance from bottom */
    left: 10px;      /* distance from left */
    padding: 5px 10px;
    border-radius: var(--bs-card-inner-border-radius);
    font-size: 0.75rem;
    z-index: 20;
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
    user-select: none;
    pointer-events: none;  /* prevents accidental clicks */
}

.card-title{
    margin-bottom: .2rem;
}

.text-body-secondary{
    font-size: 13px;
}