/* Show the complete approved hero composition rather than zooming past its edges. */
.hero-image{background:none;right:0;display:flex;align-items:center;justify-content:flex-end;mask-image:none;-webkit-mask-image:none}
.hero-illustration{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;mask-image:linear-gradient(to right,transparent,#000 10%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);-webkit-mask-composite:source-in}
@media(min-width:1025px){
  .hero-image{width:72%;right:24px;top:116px;height:calc(100% - 116px)}
}
@media(min-width:901px) and (max-width:1024px){
  .hero-image{width:67%;right:12px}
}
@media(max-width:900px){
  .hero-image{width:100%;height:auto;min-height:0;aspect-ratio:3/2;background-size:contain;background-position:center;right:auto;top:auto;margin-top:16px}
}
@media(max-width:600px){.hero-image{height:auto;aspect-ratio:3/2;margin-top:12px}}
.product-grid:has(.motion-card){position:relative}
.motion-card .approved-photo img{transition:none}
.material-frame{min-width:0;width:100%;transform-origin:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.material-frame .bedroom-image{width:100%;display:block}
.scroll-surface-active{will-change:transform}
@media(prefers-reduced-motion:reduce){.hero-image,.material-frame{transform:none!important;will-change:auto}}
@media(prefers-reduced-motion:reduce){.motion-card{transform:none!important;opacity:1!important}}