@import url('https://fonts.googleapis.com/css?family=Maven+Pro');

body {
	background: #f0f0f0;
}
.xop-section {
	/*font-family: 'Maven Pro', sans-serif;*/
	font-family: "Open Sans", sans-serif;
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.3;
    margin: 0 0 4em;
}
.project {
    display: block;
	width: 100%;
	text-decoration: none;
	margin: 1em 0;
    cursor: pointer;
}
figure {
	margin: 0;
	padding: 0;
}
.project figure img {
	width: 100%;
	display: block;
	object-fit: cover;
	height: 300px;
}
.project figcaption {
	padding: 1em;
	background: #0d175e;
	color: #fff;
}
.project h3 {
	color: white;
	margin: 0;
}
.cta {
	margin: .5em 0;
}
.cta:after {
	content: '\f061';
	font-family: "Font Awesome 5 Free";
	display: inline-flex;
	margin: 0 0 .5em .5em;
}

/*

When the browser is 960px or larger.

*/

@media screen and (min-width: 960px) {
	.xop-wrapper {
		max-width: 960px;
		margin: 0 auto;
	}
	.xop-container {
		display: grid;
		-ms-grid-columns: repeat(3, 1fr);
		grid-template-columns: repeat(3, 1fr);
		-ms-grid-gap: 1em;
		grid-gap: 1em;
	}
	/*.project:nth-child(1) {
		grid-column: 1 / span 3;
	}*/
	.project.three-col {
		grid-column: 1 / span 3;
		-ms-grid-column: 1 / span 3;
	}
	.project.two-col {
		grid-column: 1 / span 2;
		-ms-grid-column: 1 / span 2;
	}
	.project.two-col.right {
		grid-column: 2 / span 2;
		-ms-grid-column: 2 / span 2;
	}
	.project.two-row {
		grid-row: span 2;
		-ms-grid-row: span 2;
		height: inherit;
	}
	.project.two-row img{
		height: 620px;
	}
	.project {
		width: 100%;
		height: 300px;
		text-decoration: none;
        margin: 0;
	}
	.project figure {
		position: relative;
        overflow: hidden;
	}
	.project figure img {
		position: relative;
        z-index: 999;
        transition: transform 0.4s;
	}
	.project figure:hover img {
		transform: translateY(-90px);
	}

	.project figcaption {
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 20px;
		height: 90px;
		width: 100%;
	}
}