.vbg-grid{
  display:block;
  width:100%;
  margin:0 0 24px;
}
.vbg-desktop-grid{display:block!important}
.vbg-mobile-grid{display:none!important}
.vbg-row{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  column-gap:12px!important;
  row-gap:12px!important;
  width:100%!important;
  margin:0 0 12px!important;
  padding:0!important;
  align-items:stretch!important;
}
.vbg-row:last-child{margin-bottom:0!important}
.vbg-item{
  grid-column:span var(--vbg-dspan)!important;
  min-width:0!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
}
.vbg-item>a,.vbg-item>picture,.vbg-item a>picture{
  display:block!important;
  width:100%!important;
  height:100%!important;
}
.vbg-item img{
  display:block!important;
  width:100%!important;
  height:var(--vbg-dh)!important;
  object-fit:var(--vbg-fit)!important;
  object-position:var(--vbg-pos)!important;
  margin:0!important;
  padding:0!important;
}

/* Desktop mosaic: positions 0/1 stack in the left 33.33%; position 2 fills the right 66.67%. */
.vbg-row.vbg-layout-mosaic_left{
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  height:var(--vbg-dh)!important;
}
.vbg-row.vbg-layout-mosaic_left .vbg-item:nth-child(1){
  grid-column:1 / span 4!important;
  grid-row:1!important;
}
.vbg-row.vbg-layout-mosaic_left .vbg-item:nth-child(2){
  grid-column:1 / span 4!important;
  grid-row:2!important;
}
.vbg-row.vbg-layout-mosaic_left .vbg-item:nth-child(3){
  grid-column:5 / span 8!important;
  grid-row:1 / span 2!important;
}
.vbg-row.vbg-layout-mosaic_left .vbg-item img{
  height:100%!important;
}

/* Auto-height mosaic: the two small images define the two row heights; the big image stretches across both. */
.vbg-row.vbg-layout-mosaic_left.vbg-desktop-height-auto{
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  height:auto!important;
  aspect-ratio:var(--vbg-drow-ar,auto)!important;
}
.vbg-row.vbg-layout-mosaic_left.vbg-desktop-height-auto .vbg-item:nth-child(1) img,
.vbg-row.vbg-layout-mosaic_left.vbg-desktop-height-auto .vbg-item:nth-child(2) img{
  height:100%!important;
  min-height:0!important;
}
.vbg-row.vbg-layout-mosaic_left.vbg-desktop-height-auto .vbg-item:nth-child(3),
.vbg-row.vbg-layout-mosaic_left.vbg-desktop-height-auto .vbg-item:nth-child(3)>a,
.vbg-row.vbg-layout-mosaic_left.vbg-desktop-height-auto .vbg-item:nth-child(3)>picture,
.vbg-row.vbg-layout-mosaic_left.vbg-desktop-height-auto .vbg-item:nth-child(3) a>picture{
  height:100%!important;
}
.vbg-row.vbg-layout-mosaic_left.vbg-desktop-height-auto .vbg-item:nth-child(3) img{
  height:100%!important;
  min-height:100%!important;
}


/* Desktop reverse mosaic: position 0 fills the left 66.67%; positions 1/2 stack in the right 33.33%. */
.vbg-row.vbg-layout-mosaic_right{
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  height:var(--vbg-dh)!important;
}
.vbg-row.vbg-layout-mosaic_right .vbg-item:nth-child(1){
  grid-column:1 / span 8!important;
  grid-row:1 / span 2!important;
}
.vbg-row.vbg-layout-mosaic_right .vbg-item:nth-child(2){
  grid-column:9 / span 4!important;
  grid-row:1!important;
}
.vbg-row.vbg-layout-mosaic_right .vbg-item:nth-child(3){
  grid-column:9 / span 4!important;
  grid-row:2!important;
}
.vbg-row.vbg-layout-mosaic_right .vbg-item img{
  height:100%!important;
}

/* Auto-height reverse mosaic: the two small images define the two row heights; the large left image stretches across both. */
.vbg-row.vbg-layout-mosaic_right.vbg-desktop-height-auto{
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  height:auto!important;
  aspect-ratio:var(--vbg-drow-ar,auto)!important;
}
.vbg-row.vbg-layout-mosaic_right.vbg-desktop-height-auto .vbg-item:nth-child(2) img,
.vbg-row.vbg-layout-mosaic_right.vbg-desktop-height-auto .vbg-item:nth-child(3) img{
  height:100%!important;
  min-height:0!important;
}
.vbg-row.vbg-layout-mosaic_right.vbg-desktop-height-auto .vbg-item:nth-child(1),
.vbg-row.vbg-layout-mosaic_right.vbg-desktop-height-auto .vbg-item:nth-child(1)>a,
.vbg-row.vbg-layout-mosaic_right.vbg-desktop-height-auto .vbg-item:nth-child(1)>picture,
.vbg-row.vbg-layout-mosaic_right.vbg-desktop-height-auto .vbg-item:nth-child(1) a>picture{
  height:100%!important;
}
.vbg-row.vbg-layout-mosaic_right.vbg-desktop-height-auto .vbg-item:nth-child(1) img{
  height:100%!important;
  min-height:100%!important;
}

/* Clickability cue: desktop mouse/trackpad only. */
.vbg-item.vbg-clickable,
.vbg-item.vbg-clickable>a{
  cursor:pointer!important;
}
@media (hover:hover) and (pointer:fine){
  .vbg-item.vbg-clickable img{
    transition:transform .20s ease,filter .20s ease!important;
    will-change:transform;
  }
  .vbg-item.vbg-clickable:hover img,
  .vbg-item.vbg-clickable:focus-within img{
    transform:scale(1.012)!important;
    filter:brightness(.97)!important;
  }
}

@media(max-width:767px){
  .vbg-grid{margin:0 0 16px}
  .vbg-desktop-grid{display:none!important}
  .vbg-mobile-grid{display:block!important}
  .vbg-mobile-grid .vbg-row{
    grid-template-columns:repeat(12,minmax(0,1fr))!important;
    grid-template-rows:none!important;
    column-gap:8px!important;
    row-gap:8px!important;
    margin-bottom:8px!important;
    height:auto!important;
  }
  .vbg-mobile-grid .vbg-item{
    grid-column:span var(--vbg-mspan)!important;
    grid-row:auto!important;
  }
  .vbg-mobile-grid .vbg-item img{
    height:var(--vbg-mh)!important;
    min-height:0!important;
    transform:none!important;
    filter:none!important;
  }
  .vbg-mobile-grid .vbg-row.vbg-mobile-height-auto .vbg-item img{
    height:auto!important;
  }
}