/* Fill the hero to its lower edge and blend the artwork into the copy area. */
html body.home-design .xf-hero { background: #0b0d0f; isolation: isolate; }
html body.home-design .xf-hero-art {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(74vw, 1160px);
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: right top;
  opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
}
html body.home-design .xf-hero::before {
  background: linear-gradient(90deg, #0b0d0ff5 0%, #0b0d0fde 25%, #0b0d0f8c 43%, #0b0d0f1a 66%, #0b0d0f00 100%);
  pointer-events: none;
}
html body.home-design .xf-hero::after {
  height: 100%;
  background: linear-gradient(180deg, #0b0d0f40 0%, transparent 23%, transparent 76%, #0b0d0f33 100%);
  pointer-events: none;
}
@media (max-width: 1024px) and (min-width: 761px) {
  html body.home-design .xf-hero-art { width: 76%; }
}
@media (max-width: 760px) {
  html body.home-design .xf-hero-art {
    top: auto;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 72%;
    object-position: 62% bottom;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
  }
  html body.home-design .xf-hero::before {
    background: linear-gradient(180deg, #0b0d0f 0%, #0b0d0ff0 22%, #0b0d0faa 48%, #0b0d0f26 74%, transparent 100%);
  }
}