.grid__item {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100vw;
}

.grid__item-img {
	display: block;
	height: 100%;
	width: 100%;
}

.grid__item-img canvas {
  position: absolute;
  top: 0;
	height: 100%;
}

.grid__item-img img {
	height: auto;
	width: 100%;
	display: block;
}

.grid__item-img img:nth-child(2) {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.3s;
}

.grid__item:hover .grid__item-img img:nth-child(2) {
	opacity: 1;
}

.js .grid__item-img img {
	display: none;
}

.grid__item-text {
	font-size: 1rem;
	line-height: 1.75;
	margin: 2rem 0 0 0;
	color: var(--item-text);
}


.grid__item-nav {
	display: flex;
}

@media screen and (min-width: 85em) {
	.grid__item-text {
		width: 80%;
	}
}

@media screen and (min-width: 50em) {
	.grid {
		display: grid;
		grid-template-columns: repeat(2,50vmax);
	}
	.grid__item {
		height: auto;
		width: 100%;
	}
	.grid__item-text {
		margin-top: 2.5rem;
	}
}