@media only screen and (min-width: 768px) {
    /* tablets and desktop */
    .card-img-bottom {
        color: #fff;
        height: 18rem;
    }
}

@media only screen and (max-width: 767px) {
    /* phones */
    .card-img-bottom {
        color: #fff;
        height: 30rem;
    }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
    .card-img-bottom {
        color: #fff;
        height: 30rem;
    }
}