.gk-bb-overlay{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:2147483000;
  background:transparent;
  pointer-events:none;
}

.gk-bb-container{
  margin:0 auto;
  position:relative;
  padding:6px 8px;
}

.gk-bb-grid{
  display:grid;
  grid-template-columns:repeat(var(--gkbb-cols, 2), 1fr);
  gap:4px;
  pointer-events:auto;
}

.gk-bb-banner{
  display:block;
  width:100%;
  height:var(--gkbb-hd, 62px);
  overflow:hidden;
  border-radius:6px;
  background:transparent;
}

.gk-bb-banner img{
  display:block;
  width:100%;
  height:100%;
  object-position:center;
}

/* Image mode */
.img-mode-cover .gk-bb-banner img{ object-fit:cover; }
.img-mode-contain .gk-bb-banner img{ object-fit:contain; }

/* Odd span options when count = 5 */
.gk-bb-grid.gk-bb-span-last.gk-bb-count-5 .gk-bb-banner:nth-child(5){ grid-column:1 / -1; }
.gk-bb-grid.gk-bb-span-first.gk-bb-count-5 .gk-bb-banner:nth-child(1){ grid-column:1 / -1; }

/* Close button - round + rotate on hover */
.gk-bb-close{
  position:absolute;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#d53b37;
  color:#fff;
  border:0;
  border-radius:999px;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  pointer-events:auto;
  transition: transform .18s ease, filter .18s ease;
}

/* Close position */
.close-pos-1 .gk-bb-close{ left:-28px; top:50%; transform:translateY(-50%); }
.close-pos-1 .gk-bb-close:hover{ transform:translateY(-50%) rotate(180deg); }

.close-pos-2 .gk-bb-close{ right:6px; top:-32px; transform:none; }
.close-pos-2 .gk-bb-close:hover{ transform:rotate(180deg); }

@media (max-width:768px){
  .gk-bb-container{ padding:2px 4px; max-width:100vw !important; }
  .gk-bb-grid{ grid-template-columns:repeat(var(--gkbb-mobile-cols, 2), 1fr); }
  .gk-bb-banner{ height:var(--gkbb-hm, 54px); }
  .close-pos-2 .gk-bb-close{ top:-30px; right:6px; }
}