html:not(#khs):not(#khs2):not([data-l-fs=overlay]):is(:has(#hero-img),:has([data-hero-media][data-kp-solo]),:has([data-hero-media]>img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero):has(>figure.hero-photo>#hero-img),:not(#hero:has(>.stats)>.wrap):has(>[data-hero-media] img,>[data-hero-media][data-kp-solo])){--khs-w:min(58vw,calc(100vw - 420px));position:relative}
@media (min-width:900px){
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):is(:has(#hero-img),:has([data-hero-media][data-kp-solo]),:has([data-hero-media]>img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero):has(>figure.hero-photo>#hero-img),:not(#hero:has(>.stats)>.wrap):has(>[data-hero-media] img,>[data-hero-media][data-kp-solo])){grid-template-columns:minmax(0,1fr);grid-template-areas:none;align-content:center;min-height:calc(100svh - var(--khs-top,72px));padding-right:calc(var(--khs-w) - (100vw - 100%)/2 + clamp(32px,4vw,64px));box-sizing:border-box}
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):is(:has(#hero-img),:has([data-hero-media][data-kp-solo]),:has([data-hero-media]>img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero):has(>figure.hero-photo>#hero-img),:not(#hero:has(>.stats)>.wrap):has(>[data-hero-media] img,>[data-hero-media][data-kp-solo]))>:not(figure.hero-photo):not([data-hero-media]),
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):is(:has(#hero-img),:has([data-hero-media][data-kp-solo]),:has([data-hero-media]>img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero):has(>figure.hero-photo>#hero-img),:not(#hero:has(>.stats)>.wrap):has(>[data-hero-media] img,>[data-hero-media][data-kp-solo]))>:is([data-hero-text],.hero-text,.hero-in,[data-sec-head]):not([data-hero-media])>:not([data-hero-media]){grid-area:auto/1;max-width:100%}
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):is(:has(#hero-img),:has([data-hero-media][data-kp-solo]),:has([data-hero-media]>img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo:has(>#hero-img),:not(#hero:has(>.stats)>.wrap)>[data-hero-media]:is(:has(img),[data-kp-solo])){display:block;overflow:hidden;position:absolute;top:0;bottom:0;right:calc((100% - 100vw)/2);left:auto;width:var(--khs-w);height:auto;min-height:0;max-height:none;aspect-ratio:auto;margin:0;border-radius:0;grid-area:auto;order:0;z-index:1;align-self:stretch;justify-self:stretch;transform:none}
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):is(:has(#hero-img),:has([data-hero-media][data-kp-solo]),:has([data-hero-media]>img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo:has(>#hero-img),:not(#hero:has(>.stats)>.wrap)>[data-hero-media]:is(:has(img),[data-kp-solo])) :is(#hero-img,img.kp-cover,[data-hero-media]>img){position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;border-radius:0}
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):is(:has(#hero-img),:has([data-hero-media][data-kp-solo]),:has([data-hero-media]>img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo:has(>#hero-img),:not(#hero:has(>.stats)>.wrap)>[data-hero-media]:is(:has(img),[data-kp-solo]))>.visual{left:clamp(16px,2vw,32px);bottom:clamp(16px,2vw,32px);inset-inline-end:auto;top:auto}
}
@media (max-width:899px){
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):is(:has(#hero-img),:has([data-hero-media][data-kp-solo]),:has([data-hero-media]>img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero):has(>figure.hero-photo>#hero-img),:not(#hero:has(>.stats)>.wrap):has(>[data-hero-media] img,>[data-hero-media][data-kp-solo])){padding-top:0}
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):is(:has(#hero-img),:has([data-hero-media][data-kp-solo]),:has([data-hero-media]>img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo:has(>#hero-img),:not(#hero:has(>.stats)>.wrap)>[data-hero-media]:is(:has(img),[data-kp-solo])){display:block;overflow:hidden;order:-1;grid-column:1/-1;grid-row:auto;width:100vw;max-width:none;margin:0 0 0 calc(50% - 50vw);height:clamp(260px,48svh,520px);min-height:0;max-height:none;aspect-ratio:auto;border-radius:0;transform:none}
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):is(:has(#hero-img),:has([data-hero-media][data-kp-solo]),:has([data-hero-media]>img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo:has(>#hero-img),:not(#hero:has(>.stats)>.wrap)>[data-hero-media]:is(:has(img),[data-kp-solo])) :is(#hero-img,img.kp-cover,[data-hero-media]>img){position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;border-radius:0}
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):is(:has(#hero-img),:has([data-hero-media][data-kp-solo]),:has([data-hero-media]>img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo:has(>#hero-img),:not(#hero:has(>.stats)>.wrap)>[data-hero-media]:is(:has(img),[data-kp-solo]))>.visual{display:none}
  html:not(#khs):not(#khs2):not([data-l-fs=overlay]):is(:has(#hero-img),:has([data-hero-media][data-kp-solo]),:has([data-hero-media]>img[src]:not([src=""]))) :is(:is(.hero,.head.hero,header.has-hero)>figure.hero-photo:has(>#hero-img),:not(#hero:has(>.stats)>.wrap)>[data-hero-media]:is(:has(img),[data-kp-solo])){position:relative}
}
/* a drawn hero box a photo replaces (kitphoto data-kp-solo): the photo spans the whole box, never one cell of the kit's tile grid */
[data-kp-solo].kp-has>img.kp-cover{grid-column:1/-1;grid-row:1/-1}
/* fitness_club (#hero with its .stats): the 6-track grid becomes text 40% | photo 60% to the right edge (>= 900 px); on a phone the photo runs edge to edge right under the headline */
@media (min-width:900px){
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]){grid-template-columns:minmax(var(--g),1fr) minmax(0,calc(min(1160px,100vw - 2*var(--g)) * .4)) clamp(32px,4vw,56px) minmax(0,calc(min(1160px,100vw - 2*var(--g)) * .6 - clamp(32px,4vw,56px) + max(var(--g),(100vw - 1160px)/2)));padding-block:0;align-items:stretch;min-height:calc(100svh - var(--hdr,70px))}
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]) [data-hero-text]{grid-area:1/2/2/3;align-self:center;padding-block:clamp(24px,4vw,56px)}
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]) [data-hero-media]{grid-area:1/4/2/5;aspect-ratio:auto;max-height:none;height:100%;min-height:calc(100svh - var(--hdr,70px));border-radius:0}
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]) [data-hero-media]>img.kp-cover{height:100%;object-fit:cover}
}
@media (max-width:899px){
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]) [data-hero-text]{display:contents}
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]) [data-hero-text]>*{grid-column:2/4;grid-row:auto}
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]) [data-hero-text]>:is(.kick,.kicker){grid-row:1}
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]) [data-hero-text]>h1{grid-row:2}
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]) [data-hero-media]{grid-area:3/1/4/-1;aspect-ratio:4/5;max-height:62svh;width:100%;border-radius:0}
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo]) [data-hero-media]>img.kp-cover{height:100%;object-fit:cover}
  html:not(#khs):not(#khs2) #hero:has(>.stats):has([data-hero-media][data-kp-solo])>.stats{grid-row:auto}
}
/* a kitphoto solo hero box always gets its photo: kitslots' brief empty-slot hide (ks-hide, before kitphoto fills it) would collapse and re-open the big box */
html:not(#khs):not(#khs2) [data-hero-media][data-kp-solo].ks-hide{display:block!important}