/* target the parent row containing your 4 columns */
.work-container .col-sm-12, .work-container .container .row  {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on mobile screens */
}

/* Ensure the Bootstrap column and inner card stretch completely */
.work-container .col-sm-12 .col-sm-3, .work-container .container .row .col-sm-3 {
    display: flex;
    flex-direction: column;
}

.work-container .col-sm-12 .col-sm-3 .work, .work-container .container .row .col-sm-3 .work {
    display: flex;
    flex-direction: column;
    height: 100%; /* Forces the card to fill the parent height */
}

/* Push the "Read more" section perfectly to the bottom of the card */
.work-container .col-sm-12 .col-sm-3 .work p, .work-container .container .row .col-sm-3 .work p {
    flex-grow: 1 !important;
    margin-bottom: 20px !important;
}

.work-container .col-sm-12 .col-sm-3 .work .work-bottom, .work-container .container .row .col-sm-3 .work .work-bottom {
    margin-top: auto !important;
}