/* .gg-box{display: grid; grid-template-columns: repeat(auto-fit,  minmax(366px, 1fr)); grid-auto-rows: 373px; grid-gap: 4px; margin-top: 70px; margin-bottom:70px; padding-left: 12px; padding-right: 4px;} */

.gg-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-auto-rows: 220px; grid-gap: 6px; margin-top: 70px; margin-bottom: 70px; padding-left: 4px; padding-right: 4px; /*minmax(220px, 1fr)); grid-auto-rows: 220px;*/ }

.gg-element img { object-fit: cover; cursor: pointer; width: 100%; height: 100%; background: rgba(255,255,255,0.02); -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); }
.gg-element img:hover {opacity:1; -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ filter: grayscale(0%); transition:all 0.2s ease-in-out;}
#gg-screen { position: fixed; width: 100%; height: 100%; z-index: 1; top: 0; left: 0; display: none; background: rgba(0,0,0,0.92); 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: 38px; height: 38px; /*background: rgba(255,255,255,0.6);*/ color: #222; border-radius: 50%; text-align: center; line-height: 34px; vertical-align: middle; display: inline-block; 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; font-weight: 700; color:#fff;}
.gg-bt:hover {/*background: rgba(255,255,255,0.8);*/ border: 1px solid rgba(0,0,0,0.5) }
.gg-close { position: fixed; top: .5em;}
.gg-close, .gg-nxt { right: .5em;}
.gg-prev { left: .5em }
.gg-prev, .gg-nxt { position: fixed; bottom:50%;}
.gg-element:nth-child(3n+0) {grid-row-end:span 0;}


@media(max-width:478px) {
.gg-element:nth-child(3n+0) {grid-row-end:span 0;}

}