.highlight-card {
	width: 280px;
	overflow: hidden;
	height: 300px;
	cursor: pointer;
	margin: 0 8px;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,0.25);
	border-radius: 8px;
	display: inline-block;
	vertical-align: top;
}

.highlights .highlight-card:hover {
	box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .12);
}

.highlight-card .image-holder {
	height: 190px;
	background: #e5e5e5;
	overflow: hidden;
	position: relative;
}

.image-holder .highlight-img {
	width: 100%;
	height: 100%;
	transition: 0.5s all;
	object-fit: cover
}

.image-holder .highlight-img:hover {
	transform: scale(1.1)
}

.highlight-card .highlight-details {
	width: 100%;
	height: 110px;
	padding: 12px;
	position: relative;
	background: white;
}

.highlight-details h3 {
	display: inline-block;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.33;
	color: rgba(0,0,0,0.87);
}

.highlight-details span {
	font-size: 14px;
	line-height: 1.71;
	display: block
}

.highlight-details p {
	height: 40px;
  	font-size: 14px;
  	line-height: 1.43;
  	text-align: left;
  	color: rgba(0,0,0,0.54);
  	text-align: center;
  	text-overflow: ellipsis;
  	white-space: initial;
  	overflow: hidden;
}

@media (max-width: 800px) {
	.highlight-card .image-holder {
		height: 180px;
	}

	.highlight-card {
		height: 290px;
		width: 280px;
		margin: 0 8px;
	}
}