/* The foreground image is anchored to the slide, outside its scrolling text. */
.bxx-slide { overflow:hidden; }
.bxx-slide:has(> .bxx-slide-image) .bxx-slide-content {
  grid-template-columns:minmax(0,1fr) minmax(160px,min(48%,calc(34% * var(--bx-hero-image-scale,1))));
}
.bxx-slide > .bxx-slide-image {
  position:absolute;
  z-index:1;
  inset:auto 40px 0 auto;
  display:block;
  margin:0;
  padding:0;
  border:0;
  width:calc((34% - 24px) * var(--bx-hero-image-scale,1));
  max-width:calc(48% - 24px);
  height:min(var(--bx-hero-image-height,340px),100%);
  max-height:100%;
  object-fit:contain;
  object-position:center bottom;
  pointer-events:none;
}
.bx-layout-hero .bxx-slide > .bxx-slide-image {
  right:max(24px,calc((100% - var(--bx-container,1440px))/2 + 24px));
  bottom:0;
  width:min(calc((34% - 24px) * var(--bx-hero-image-scale,1)),calc((var(--bx-container,1440px)*.34 - 24px) * var(--bx-hero-image-scale,1)));
  max-width:min(calc(48% - 24px),calc(var(--bx-container,1440px)*.48 - 24px));
  height:min(var(--bx-hero-image-height,340px),100%);
}
@media(max-width:800px) {
  .bx-layout-hero .bxx-slide:has(> .bxx-slide-image) .bxx-slide-content {
    grid-template-columns:minmax(0,1fr);
  }
  .bx-layout-hero .bxx-slide > .bxx-slide-image {
    right:14px;
    bottom:0;
    width:calc(150px * var(--bx-hero-image-mobile-scale,1));
    max-width:48%;
    height:min(var(--bx-hero-image-mobile-height,180px),100%);
  }
}
@media(max-width:700px) {
  .bxx-slide:has(> .bxx-slide-image) .bxx-slide-content {
    grid-template-columns:minmax(0,1fr) min(48%,calc(110px * var(--bx-hero-image-mobile-scale,1)));
  }
  .bxx-slide > .bxx-slide-image {
    right:18px;
    width:calc(110px * var(--bx-hero-image-mobile-scale,1));
    max-width:48%;
    height:min(var(--bx-hero-image-mobile-height,180px),100%);
  }
  .bx-layout-hero .bxx-slide:has(> .bxx-slide-image) .bxx-slide-content {
    grid-template-columns:minmax(0,1fr);
  }
}