/* ================================================================================================ */
/* ============================================= GRID ============================================= */
/* ================================================================================================ */
.content {
	padding: 1em 0 3em;
	width: 90%;
	margin: 0 auto;
}
.grid {
	position: relative;
	width: 90% !important;
	margin: 0 auto;
}
.js .grid::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	background: #252323 url(../img/loading.svg) no-repeat 50% 75px;
	background-size: 60px auto;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.js .grid--loaded::after {
	opacity: 0;
}

.img-wrap {
	display: block;
}

.img-wrap:focus,
.img-wrap:hover {
	outline: none;
}

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

.grid-sizer,
.grid-item {
	width: 20%;
	padding: 10px;
}

.grid-item--current {
	opacity: 0 !important;
}

@media screen and (max-width: 480px) {
	.content {
		width: 96%;
	}
	.grid {
		width: 96% !important;
	}
	.grid-sizer,
	.grid-item {
		width: 100%;
	}
}
@media screen and (min-width: 480px) and (max-width: 640px) {
	.content {
		width: 96%;
	}
	.grid {
		width: 96% !important;
	}
	.grid-sizer,
	.grid-item {
		width: 50%;
	}
}
@media screen and (min-width: 640px) and (max-width: 1280px) {
	.grid-sizer,
	.grid-item {
		width: 33.33%;
	}
}
@media screen and (min-width: 1280px) and (max-width: 1940px) {
	.grid-sizer,
	.grid-item {
		width: 25%;
	}
}