/* cl-home.css: the home in Mickey Thompson's look: their near-black page, the first slide of their slider as one
   static hero (the photo cropped as their 900px slide is, the h1 in their yellow capitals in its sky), and the dark strip
   under it that holds the kit's vehicle band from 980px. Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-home-page { background: var(--site-dark); }
.cl-hero { position: relative; display: block; height: 870px; overflow: hidden; background-color: var(--site-dark); background-size: 0 0; }
.cl-hero::before { content: ""; position: absolute; top: -30px; right: 0; bottom: 0; left: 0; background-image: inherit; background-size: cover; background-position: center; }
.cl-hero__title { position: absolute; top: 190px; left: var(--site-gutter); right: var(--site-gutter); margin: 0; color: var(--site-yellow); font: 600 72px/0.95 var(--site-font-heading); text-align: center; text-transform: uppercase; text-shadow: 0 0 18px #000, 0 2px 4px #000; }
.cl-home__band { min-height: 100px; display: flex; flex-direction: column; justify-content: center; background: var(--site-dark); }

@media (max-width: 979.98px) {
  .cl-hero { height: 814px; }
  .cl-hero__title { top: 150px; left: 16px; right: 16px; font-size: 44px; }
  /* the band's stacked fields would double their 100px strip on a phone: the phone home leaves it to the listings */
  .cl-home__band > * { display: none; }
}

}