.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: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(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}}