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



h1 {
	margin-bottom: .25em;
}

p {
	line-height: 1.35em;
}

.wrapper {
	max-width: 87%;
	margin: 2rem auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding-left: 1em;
}

.card {
	flex-basis: 300px;
	flex-grow: 1;
	margin: 0 1em 1em 0;
	overflow: hidden;
	height: 15rem;
	position: relative;
	cursor: pointer;
    box-shadow: 0 10px 35px -15px #000;
    font-family: 'Alegreya', serif;
}

.img {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position:50% 50%;
	transition:all 100ms ease;
}

.text {
	color: #fff;
	padding: 1em;
	position: absolute;
	top: calc(100% - 4em);
	transition: all 200ms ease;
	width:100%;
	height:100%;
}

.text:before {
	content: '';
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 1) 100%);
	position: absolute;
	width: 100%;
	height: 130%;
	bottom: 0;
	margin-left: -1em;
}

.cardtitle {
    font-size: 2rem;
}

h1,
p {
	position: relative;
}

.card:hover .text {
	top: 0;
}

.card:hover .text:before{
	background:rgba(0,0,0,.5);
}

.card:hover .img{
	filter:blur(5px);
}

/* Credit to https://codepen.io/MasterCharlz/pen/jrarWQ */