* { box-sizing: border-box; }

.section__content{max-width: 148rem;}
.section__content{max-width: 148rem;}

grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: .5rem;
}

.grid {background: #fff;}

/* clear fix */
.grid:after {
	content: '';
	display: block;
	clear: both;
}

.grid-page {
  break-inside: avoid;
  page-break-inside: avoid;
}

.grid-item img {
	display: block;
	max-width: 100%;
}
img.grid-item {
	border: 2px solid #fff;
}
.grid-item .card-img-overlay{
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.10) 56%, rgba(255,255,255,0) 100%);
	transition: all 1s ease;
}
.grid-item .card-img-overlay:hover {
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.20) 56%, rgba(255,255,255,0) 100%);
}
.grid-sizer,
.grid-item { width: 25%; }
.grid-item-2 { width: 50%; }
.grid-item-3 { width: 75%; }

@media only screen and (max-width: 768px) {
	.grid-sizer,
	.grid-item { width: 50%; }
	.grid-item-2 { width: 50%;}
	.grid-item-3 { width: 100%; }
}

@media only screen and (max-width: 576px) {
	.grid-sizer,
	.grid-item { width: 100%; }
	.grid-item-2 { width: 100%; }
	.grid-item-3 { width: 100%; }
}


.overlay {				
	background: rgba(57, 57, 57, 0.5);
	align-items: center;
	justify-content: center;
}