@media(min-width:901px) and (max-width:1180px){.hero{grid-template-columns:.92fr 1.08fr;padding-left:4vw;padding-right:3vw}.hero-art{min-height:690px}.hero-art .mane,.hero-art .face{left:67%;top:26%}.hero-art .mane{width:43%}.hero-art .face{width:31.5%}.hero-art .ray-accent{width:22%;left:5%;top:9%}.hero-art .stars{width:20%;left:5%;top:14%}.hero-art .stars-secondary{width:13%;right:4%;top:36%}.hero-art .crows{width:14%;left:29%;top:22%}.hero-art .city{width:57%;right:-4%;top:46%}.hero-art .sunflower{width:34%;right:0;bottom:7%}.hero-art .flower{width:15%;left:4%;bottom:29%}.hero-art .sign{width:21%;right:3%;top:52%}.hero-art .skate{width:27%;right:27%;bottom:8%}.hero-art .spray{width:14%;right:4%;bottom:8%}.hero-art .glasses{width:24%;left:5%;bottom:11%}.hero-art .orange{width:12%;right:18%;bottom:4%}.hero-art .smiley{width:8%;left:29%;top:43%}.hero-art .smiley-two{width:6%;right:29%;top:38%}.hero-art .heart{width:5.5%;left:45%;top:32%}.hero-art .star-badge{width:6.5%;right:29%;bottom:34%}.hero-art .mini-star{width:5.5%;left:17%;top:33%}.hero-art .mini-star-two{width:5%;right:6%;top:43%}.hero-art .mini-text-one{width:13%;left:6%;top:53%}.hero-art .mini-text-two{width:13%;left:22%;top:60%}.hero-art .mini-text-three{width:12%;left:9%;bottom:18%}.hero-art .sentence{width:23%;left:7%;top:69%}.hero-art .badge-ai{width:15.5%;left:5%;bottom:2%}.hero-art .badge-design{width:16.5%;left:27%;bottom:1%}.hero-art .badge-system{width:16.5%;left:49%;bottom:2%}}
@media(min-width:1181px) and (max-width:1320px){.hero{grid-template-columns:.98fr 1.02fr;padding-left:4.5vw;padding-right:3.5vw}.hero-art{min-height:710px}.hero-art .mane,.hero-art .face{left:68%;top:25.8%}.hero-art .mane{width:44%}.hero-art .face{width:32.3%}.hero-art .ray-accent{width:23.5%;left:5.5%;top:8%}.hero-art .stars{width:22%;left:5%;top:13%}.hero-art .stars-secondary{width:14%;right:3.5%;top:35.5%}.hero-art .crows{width:15%;left:29.5%;top:21%}.hero-art .city{width:58.5%;right:-3.5%;top:45.5%}.hero-art .sunflower{width:36%;right:0;bottom:6.5%}.hero-art .flower{width:16%;left:3.5%;bottom:29%}.hero-art .sign{width:22%;right:2.5%;top:51%}.hero-art .skate{width:28.5%;right:26.5%;bottom:7.5%}.hero-art .spray{width:14.5%;right:3.5%;bottom:7.5%}.hero-art .glasses{width:25.5%;left:4.5%;bottom:10.5%}.hero-art .orange{width:12.5%;right:17.5%;bottom:3.5%}.hero-art .smiley{width:8.5%;left:29%;top:42.5%}.hero-art .smiley-two{width:6.5%;right:28.5%;top:37.5%}.hero-art .heart{width:6%;left:45%;top:31.5%}.hero-art .star-badge{width:7%;right:28%;bottom:33.5%}.hero-art .mini-star{width:6%;left:17%;top:32%}.hero-art .mini-star-two{width:5.25%;right:5.5%;top:42.5%}.hero-art .mini-text-one{width:14%;left:5.5%;top:52%}.hero-art .mini-text-two{width:14%;left:22%;top:59%}.hero-art .mini-text-three{width:13%;left:8.5%;bottom:17.5%}.hero-art .sentence{width:24.5%;left:6.5%;top:68.5%}.hero-art .badge-ai{width:16.25%;left:4.5%;bottom:2%}.hero-art .badge-design{width:17.25%;left:26.5%;bottom:1%}.hero-art .badge-system{width:17.25%;left:48.5%;bottom:2%}}
/* Bridge the 900→901px layout switch so the collage does not visibly snap when the hero becomes two columns. */
@media(min-width:901px) and (max-width:980px){
  .hero-art{min-height:clamp(650px,calc(193.8px + 50.633vw),690px)}
  .hero-art .mane,.hero-art .face{left:clamp(67%,calc(91.81% - 2.532vw),69%);top:clamp(26%,calc(32.203% - .633vw),26.5%)}
  .hero-art .ray-accent{left:clamp(5%,calc(29.81% - 2.532vw),7%);top:clamp(8%,calc(-3.405% + 1.266vw),9%)}
  .hero-art .stars{width:clamp(20%,calc(32.405% - 1.266vw),21%);left:clamp(5%,calc(17.405% - 1.266vw),6%);top:clamp(13%,calc(1.595% + 1.266vw),14%)}
  .hero-art .crows{left:clamp(29%,calc(53.81% - 2.532vw),31%);top:clamp(21%,calc(9.595% + 1.266vw),22%)}
  .hero-art .city{width:clamp(56%,calc(44.595% + 1.266vw),57%);right:clamp(-4%,calc(45.62% - 5.063vw),0%)}
  .hero-art .glasses{width:clamp(23%,calc(11.595% + 1.266vw),24%);left:clamp(5%,calc(17.405% - 1.266vw),6%)}
  .hero-art .mini-text-one{left:clamp(6%,calc(18.405% - 1.266vw),7%);top:clamp(52%,calc(40.595% + 1.266vw),53%)}
}
/* Keep the collage from over-scaling on very wide desktops. Percent-sized layers otherwise grow with an unbounded art column. */
@media(min-width:1600px){
  .hero{grid-template-columns:minmax(620px,1fr) minmax(700px,820px);column-gap:clamp(32px,4vw,72px)}
  .hero-art{width:100%;max-width:820px;min-height:730px;justify-self:end}
}