body {
	background:#f9f9f9;
}
.gg-box {
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
	grid-auto-rows:200px;
	grid-gap:4px
}
.gg-box img {
	object-fit:cover;
	cursor:pointer;
	width:100%;
	height:100%;
	background:rgba(255, 255, 255, 0.02);
	border-radius:0px
}
.gg-box img:hover {
	opacity:.75
}
#gg-screen {
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:rgba(0, 0, 0, 0.85);
	z-index:9999;
	text-align:center
}
#gg-screen .gg-image {
	height:100%;
	display:inline-flex;
	justify-content:center;
	align-items:center
}
#gg-screen .gg-image img {
	max-width:100%;
	max-height:100%;
	margin:0 auto
}
.gg-bt {
	width:50px;
	height:50px;
	background:rgba(255, 255, 255, 0.6);
	color:#222;
	text-align:center;
	line-height:47px;
	vertical-align:middle;
	cursor:pointer;
-moz-transition:all .4s ease;
-o-transition:all .4s ease;
-webkit-transition:all .4s ease;
transition:all .4s ease;
	font-size:25px;
	border:1px solid rgba(0, 0, 0, 0.05);
	box-sizing:border-box;
	padding-left:2px;
	position:fixed;
	bottom:10px
}
.gg-bt:hover {
	background:rgba(255, 255, 255, 0.8);
	border:1px solid rgba(0, 0, 0, 0.5)
}
.gg-close {
	top:10px
}
.gg-close, .gg-next {
	right:10px
}
.gg-prev {
	right:61px
}
.gg-prev, .gg-next {
	bottom:10px
}
@media(min-width:478px) {
.gg-box img:nth-child(3n+0) {
grid-row-end:span 2
}
}
@media(max-width:768px) {
.gg-box {
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows:200px;
grid-gap:6px
}
}
@media(max-width:450px) {
.gg-box {
grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
grid-auto-rows:160px;
grid-gap:4px
}
}