/* Join the name and foliage into one continuous banner composition. */
@media(min-width:651px) {
  .hero { grid-template-columns:60% 40%; }
  /* Preserve the shorter banner height while using the former gap for the name. */
  .hero-brand-art {
    height:max(90px,calc((100cqw * .783333333 - 145.822785px) * .49375 - 96px));
  }
  .hero .button { width:37.6%; }
  .hero-art { background:none; overflow:visible; z-index:1; }
  .hero-art>.fragment {
    width:calc(100% + 36px);
    height:100%;
    inset:0 0 0 -36px;
    margin:0;
    mask-image:linear-gradient(90deg,transparent 0,#000 55px);
    mask-repeat:no-repeat;
  }
  .hero-art .hero-explore {
    right:calc((100cqw + 36px) * .02);
  }
}
@media(max-width:650px) {
  .hero-art>.fragment {
    mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
    mask-repeat:no-repeat;
  }
}