/* cl-home.css: the home in Skunk2's look (templates/home.html), measured on skunk2.com at 1440 and in their
   390 phone stage: the hero still, the vehicle band and the featured products under their ruled DIN heading.
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-home { overflow: hidden; }

/* the slider's first slide, still */
.cl-hero { display: block; }
.cl-hero img { width: 100%; height: auto; aspect-ratio: 1600 / 483; object-fit: cover; }

/* the kit's vehicle band under the hero; on phones folded behind its button */
.cl-pick__btn { display: none; }

/* a band under its ruled heading */
.cl-sec__h { display: flex; align-items: center; gap: 20px; margin: 45px 36px 15px; font: 500 45px/49.5px var(--site-font-heading); text-transform: uppercase; color: var(--site-fg); text-align: center; }
.cl-sec__h::before, .cl-sec__h::after { content: ""; flex: 1; height: 1px; background: var(--site-fg); }

/* featured products */
.cl-products { display: flex; justify-content: space-between; padding: 9px 41px 0; }
.cl-product { width: 242px; }
.cl-product a { display: flex; flex-direction: column; align-items: center; min-height: 374px; text-align: center; color: var(--site-fg); }
.cl-product img { width: 242px; height: 242px; object-fit: contain; }
.cl-product__name { margin-top: 0; font: 400 22px/26.4px var(--site-font-heading); text-transform: uppercase; }
.cl-product__part { margin-top: 6px; font: 400 14px/16.8px var(--site-font-body); }
.cl-product a:hover .cl-product__name { color: var(--site-accent); }

/* phones: their 390 stage, the products in one column */
@media (max-width: 979.98px) {
  .cl-hero { margin: 0 -15px; }
  .cl-pick { padding: 10px 15px 0; }
  .cl-pick__btn { display: flex; width: 100%; }
  .cl-js .cl-pick:not(.is-open) .cl-pick__fold { display: none; }
  .cl-js .cl-pick.is-open .cl-pick__fold { margin: 10px -15px 0; }
  .cl-hero img { aspect-ratio: 767 / 232; }
  .cl-sec__h { margin: 45px 10px 20px; gap: 12px; font-size: 40px; line-height: 49.5px; }
  .cl-products { flex-direction: column; align-items: center; padding: 4px 15px 0; }
  .cl-product { width: 100%; }
  .cl-product a { min-height: 483px; }
  .cl-product img { width: 360px; height: 360px; }
}

}