body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;background:#f9f9f9;
}
.gg-box{
display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-auto-rows:200px;grid-gap:8px;
}
.gg-box img{
object-fit:cover;cursor:pointer;width:100%;height:100%;background:rgba(255,255,255,0.02);border-radius:10px;
}
.gg-box img:hover{
opacity:.98;
}
#gg-screen{
position:fixed;width:100%;height:100%;top:0%;left:0%;background:rgba(255,255,255,0.85);z-index:10000;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(0,0,0,1.0);color:#FFF;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(0,0,0,0.8);border:1px solid rgba(0,0,0,0.5);color:#FFF;
}
.gg-close{
top:15%;
}
.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(150px,1fr));grid-auto-rows:150px;grid-gap:6px;
}
}
@media(max-width:450px){
.gg-box{
grid-template-columns:repeat(auto-fit,minmax(100px,1fr));grid-auto-rows:100px;grid-gap:4px;
}
}