/* Bertil Gallery PRO - Variable Grid */
.bgp-mosaic{display:grid;grid-gap:8px;padding:10px;grid-auto-rows:120px;grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){ .bgp-mosaic{grid-template-columns:repeat(3,1fr);} }
@media(max-width:600px){ .bgp-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:100px;} }
/* item sizes - we'll assign classes randomly in JS */
.bgp-item{position:relative;overflow:hidden;border-radius:8px;background:#eee;}
.bgp-item img{width:100%;height:100%;object-fit:cover;display:block;}
.bgp-item.size-2x2{grid-column: span 2; grid-row: span 2;}
.bgp-item.size-2x1{grid-column: span 2; grid-row: span 1;}
.bgp-item.size-1x2{grid-column: span 1; grid-row: span 2;}
.bgp-item.size-1x1{grid-column: span 1; grid-row: span 1;}
/* lightbox basics */
.bgp-lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;pointer-events:none;transition:opacity .2s;}
.bgp-lightbox.show{opacity:1;pointer-events:auto;}
.bgp-lightbox img{max-width:90%;max-height:90%;border-radius:6px;}
.bgp-lightbox .bgp-prev,.bgp-lightbox .bgp-next,.bgp-lightbox .bgp-close{position:absolute;background:transparent;border:0;color:#fff;font-size:28px;padding:12px;cursor:pointer;}
.bgp-lightbox .bgp-prev{left:20px;} .bgp-lightbox .bgp-next{right:20px;} .bgp-lightbox .bgp-close{top:20px;right:20px;}