@media (min-width:851px){
  .hero-grid{position:relative;grid-template-columns:minmax(0,56%) minmax(0,56%)}
  .hero-copy{position:absolute;z-index:5;left:0;top:-110px;width:45vw;max-width:calc(100vw - 56px);height:378px;display:flex;align-items:center}
  .hero-grid:has(.showcase.has-custom-laptop) .hero-copy{top:-145px;height:504px}
  .showcase{grid-column:2;width:121%;height:636px;margin-left:-21%;z-index:2}
  .showcase .laptop-custom-image{height:504px;object-fit:cover;object-position:right center}
  .showcase .laptop,.showcase .laptop-custom-image{-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.08) 8%,rgba(0,0,0,.55) 24%,#000 42%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.08) 8%,rgba(0,0,0,.55) 24%,#000 42%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
  .hero h1{text-shadow:0 3px 24px rgba(2,12,25,.38)}
}
.hero .hero-bottom-cta{position:absolute;z-index:6;left:50%;bottom:68px;transform:translateX(-50%);min-width:266px}.hero .hero-bottom-cta:hover{transform:translate(-50%,-2px)}
.hero .scroll-cue{position:absolute;z-index:6;left:50%;bottom:24px;transform:translateX(-50%)}
@media (max-width:850px){.hero .hero-bottom-cta{position:absolute;z-index:6;left:50%;bottom:62px;transform:translateX(-50%);white-space:nowrap}.hero .hero-bottom-cta:hover{transform:translate(-50%,-2px)}}
@media (min-width:851px) and (max-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,58%) minmax(0,54%)}
  .hero-copy{top:-180px;height:303px}
  .hero-grid:has(.showcase.has-custom-laptop) .hero-copy{top:-145px;height:360px}
  .showcase .laptop-custom-image{height:360px}
  .showcase{width:116%;margin-left:-16%}
}