.demo {
	height: 400px;
	margin: 0 auto;
	-webkit-box-shadow: -1px 9px 18px -5px rgba(17, 17, 17, 1);
	-moz-box-shadow: -1px 9px 18px -5px rgba(17, 17, 17, 1);
	box-shadow: -1px 9px 18px -5px rgba(17, 17, 17, 1);
	overflow: hidden;
	position: relative;

}

button.btn.btn-primary {    padding: 16px 28px;    border-radius: 0;    background: #087187;    border: none;   box-shadow: 0 4px 5px -3px #333;    transition: 0.5s; transition: ease-out 0.4s;}

button.btn.btn-primary:hover {    box-shadow: inset 0 0 0 50px white; color:black; }




/* ====== MAIN CODE ===== */
.coursemeal {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
}

.coursemeal__div {
	position: relative;
        	flex: 0 0 33.3333333%;
        border:5px solid white;

}

.responsive-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.coursemeal-info {
	background-color: rgba(0, 0, 0, 0.3);
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 15%;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	transition: all 0.4s;
}

.coursemeal-info__link:link,
.coursemeal-info__link:visited {
	font-size: 30px;
	color: #fff;
	text-align: center;
	letter-spacing: 1.8px;
	margin: 0;
	text-decoration: none;

	transition: all 0.4s;
}

.coursemeal__div:hover .coursemeal-info {
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
}

@media only screen and (max-width: 1200px) {
	body {
		flex-wrap: wrap;
	}

	.demo-description {
		padding: 0;
		flex: 0 0 100%;
		text-align: center;
	}
}

@media only screen and (max-width: 991px) {
	.demo-description {
		margin-bottom: 30px;
	}

	.coursemeal {
		height: 900px;
		flex-wrap: wrap;
	}

	.coursemeal__div {
		flex: 0 0 100%;
		height: 33.33333%;
	}

	.responsive-img img {
		height: 100%;
	}

	.coursemeal__div:nth-of-type(2) img {
		object-position: 50% 70%;
	}

	.coursemeal-info {
		height: 20%;
	}
}

@media only screen and (max-width: 767px) {
	.coursemeal__div:nth-of-type(1) img {
		object-position: 50% 75%;
	}

	.coursemeal__div:nth-of-type(3) img {
		object-position: 50% 60%;
	}

	.coursemeal-info__title {
		font-size: 25px;
	}
}