.card-img-top {
    height: 200px;            /* or whatever height fits best */
    object-fit: cover;        /* crops image to fill the box */
}


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

.card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-body > .d-grid {
    margin-top: auto; /* pushes it to the bottom */
}

.fade-in {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInCard 0.4s ease-out forwards;
}

@keyframes fadeInCard {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .pagination .page-link {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
}