.card {
    display: flex;
    flex-direction: column;
}

.card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
}

/* Ensure the card's image fits the card's width */
.card-img-top {
    object-fit: cover;
    width: 100%; /* Ensure the image takes the full width of the card */
}

/* Modal adjustments for full-width image display */

.modal-body {
    padding: 0; /* Remove padding for full-width image display */
    background: transparent;
}

.modal-content img {
    width: 100%; /* Ensure the image takes the full width of the modal */
    object-fit: contain;
    height:60%;
    background: transparent;
}