/* Keep the battle bright, with a diagonal pocket of contrast behind the copy. */
#cubimo-design [data-screen="trainers"] .cm-chapter-hero{
  position:sticky;top:0;z-index:0;
}
#cubimo-design [data-screen="trainers"] :is(.cm-chapter-hero>img,.cm-chapter-hero>picture[data-cms-responsive]>img){
  /* Crop the same top 576 source pixels at every aspect ratio. Intrinsic height
     avoids extra center cropping on wide screens; min-height covers phones. */
  inset:0 auto auto -40px;width:calc(100% + 80px);height:auto;min-height:146%;max-width:none;
  translate:0 var(--challenger-scroll-drift,0px);
  transform:perspective(1600px) translate3d(var(--challenger-pointer-x,0px),calc(-26.666667% + var(--challenger-pointer-y,0px)),0) rotateX(var(--challenger-pitch,0deg)) rotateY(var(--challenger-yaw,0deg));
  will-change:transform,translate;
}
#cubimo-design [data-screen="trainers"] .cm-trainers-main{
  --challenger-edge:14px;position:relative;z-index:4;width:100%;max-width:none;margin:calc(-1 * var(--challenger-edge)) 0 0;
  background:linear-gradient(180deg,transparent 0 calc(var(--challenger-edge) - 1px),var(--cm-ink) calc(var(--challenger-edge) - 1px) 100%);
}
@media(min-width:1441px){#cubimo-design [data-screen="trainers"] .cm-trainers-main{padding-inline:calc((100% - 1440px)/2 + 40px)}}
/* The stepped edge belongs to the foreground section, which scrolls over the
   held artwork. Keep the main itself unclipped for the 3D fullscreen controls. */
#cubimo-design [data-screen="trainers"] .cm-trainers-main:before{
  content:"";position:absolute;inset:0 0 auto;height:var(--challenger-edge);background:var(--cm-ink);pointer-events:none;z-index:-1;
  clip-path:polygon(0 0,7% 0,7% 100%,9% 100%,9% 0,42% 0,42% 50%,44% 50%,44% 0,91% 0,91% 43%,92% 43%,92% 100%,94% 100%,94% 0,100% 0,100% 100%,0 100%);
}
#cubimo-design [data-screen="trainers"] .cm-chapter-hero:after{
  right:auto;width:min(960px,80%);pointer-events:none;
  background:linear-gradient(55deg,#03120ee6 0%,#03120eb3 30%,#03120e45 56%,transparent 76%);
  mask-image:linear-gradient(0deg,#000 0%,#000 38%,transparent 100%);
}
/* Reduce the previous 552px desktop layout to 80%. Mobile keeps its height. */
@media(min-width:751px){#cubimo-design [data-screen="trainers"] .cm-chapter-hero{min-height:calc(552px * .8)}}
@media(max-width:750px){
  #cubimo-design [data-screen="trainers"] .cm-chapter-hero{position:relative;top:auto}
  #cubimo-design [data-screen="trainers"] .cm-trainers-main{--challenger-edge:26px}
  #cubimo-design [data-screen="trainers"] .cm-trainers-main:before{clip-path:polygon(0 0,18% 0,18% 100%,38% 100%,38% 46%,55% 46%,55% 0,76% 0,76% 69%,91% 69%,91% 0,100% 0,100% 100%,0 100%)}
  #cubimo-design [data-screen="trainers"] .cm-chapter-copy{bottom:26px}
  #cubimo-design [data-screen="trainers"] :is(.cm-chapter-hero>img,.cm-chapter-hero>picture[data-cms-responsive]>img){transform:translateY(-26.666667%);will-change:translate}
  #cubimo-design [data-screen="trainers"] .cm-chapter-hero:after{width:100%;background:linear-gradient(45deg,#03120ee6 0%,#03120eba 31%,#03120e38 59%,transparent 79%)}
}
@media(prefers-reduced-motion:reduce){
  #cubimo-design [data-screen="trainers"] .cm-chapter-hero{position:relative}
  #cubimo-design [data-screen="trainers"] :is(.cm-chapter-hero>img,.cm-chapter-hero>picture[data-cms-responsive]>img){transform:translateY(-26.666667%)!important;translate:none!important;will-change:auto}
  #cubimo-design [data-screen="trainers"] .cm-chapter-copy{translate:none!important;will-change:auto}
}