/* R23: keep the model-specific artwork clear of campaign copy. */
.a.direction-citrus .hero-art{aspect-ratio:auto}
/* Keep the artwork's dimensions independent of the animation wrapper and captions. */
.a.direction-citrus .hero-art>picture,
.a.direction-citrus .hero-art>.banner-motion-media{aspect-ratio:1448/1086;width:100%;height:auto;border-radius:8px;overflow:hidden}
.a.direction-citrus .hero-art picture>img{width:100%;height:auto;aspect-ratio:1448/1086;object-fit:contain}
@media(min-width:821px){
 .a.direction-citrus .hero{display:grid;grid-template-columns:32% 68%;aspect-ratio:auto;align-items:center;padding-bottom:34px}
 .a.direction-citrus .hero-art{position:relative;inset:auto;grid-column:2;grid-row:1;aspect-ratio:auto;width:100%;height:auto}
 .a.direction-citrus .hero-copy{position:relative;inset:auto;grid-column:1;grid-row:1;width:auto;padding:40px 30px 40px clamp(28px,5vw,72px);max-width:none}
 .a.direction-citrus .hero h1{font-size:clamp(32px,3.7vw,58px)}
 .a.direction-citrus .hero p{max-width:330px}
}
@media(max-width:820px){
 .a.direction-citrus .hero-art>picture,
 .a.direction-citrus .hero-art>.banner-motion-media,
 .a.direction-citrus .hero-art picture>img{aspect-ratio:1122/1402}
}