* { box-sizing: border-box; margin: 0; padding: 0; }

.card { margin: 20px; width: 30%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); border-radius: 5px; -webkit-transition: box-shadow 0.3s; transition: box-shadow 0.3s; float: left; height: 329px; }

.card-image { width: 100%; max-height: 250px; border-top-left-radius: 5px; border-top-right-radius: 5px; -webkit-transition: opacity 200ms ease; transition: opacity 200ms ease; object-fit: fill; }

.card-image:hover { opacity: 0.8; }

.card:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); }

.card-body { padding: 10px 16px; }

.card-title { margin-bottom: 15px; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

.card-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

.card img { height: 100%; }

@media only screen and (max-width: 600px) {
    .card { width: 42%; height: 300px; }
}

@media only screen and (min-width: 600px) {
    .card { width: 44%; height: 320px; }
}

@media only screen and (min-width: 768px) {
    .card { width: 44%; height: 320px; }
}

@media only screen and (min-width: 992px) {
    .card { width: 45%; }
}

@media only screen and (min-width: 1200px) {
    .card { width: 30%; }
}