/* cl-home.css: the home in wilwood.com's look (templates/home.html), from the capture's measurements:
   the phone's button over the vehicle band, the full-width banners, the catalog of 200px tiles in 5 columns (1 on
   phones).
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-ymm__toggle { display: none; }

.cl-home { --home-top: 95px; }
.cl-home__banners { display: grid; gap: 15px; max-width: var(--site-max); margin: var(--home-top) auto 0; }
.cl-home__banners img { width: 100%; height: auto; }
.cl-home__banners a:hover img { opacity: .92; }

.cl-home__catalog { max-width: 1400px; margin: 77px auto 42px; padding: 0 20px; text-align: center; }
.cl-home__h1 { font: 500 30px/33px var(--site-font-body); color: var(--site-fg); }
.cl-home__tiles { display: grid; grid-template-columns: repeat(5, 210px); justify-content: center; gap: 24px 28px; margin-top: 27px; padding: 12px 0; }
.cl-home__tiles li:nth-child(n+6):nth-child(-n+10) { margin-top: 22px; }
.cl-home__tiles a { display: block; height: 245px; padding: 5px; background: var(--site-bg); color: var(--site-title); font: 700 16px/22.86px var(--site-font-heading); }
.cl-home__tiles img { width: 200px; height: 200px; object-fit: contain; margin-bottom: 4px; }
.cl-home__tiles a:hover span { text-decoration: underline; }

@media (max-width: 979.98px) {
  .cl-js .cl-ymm__toggle {
    display: inline-flex; align-items: center; gap: 13px; height: 40px; margin: 28px 0 0 12px; padding: 0 13px;
    border: 0; border-radius: var(--site-radius); background: var(--site-accent); color: var(--site-accent-fg); font: 400 14px/20px var(--site-font-body); cursor: pointer;
  }
  .cl-js .cl-ymm:not(.is-open) .cl-ymm__band { display: none; }
  .cl-js .cl-ymm.is-open .cl-ymm__band { margin-top: 12px; }
  .cl-home__banners { gap: 15px; margin-top: 23px; overflow: hidden; }
  .cl-home__banners img { width: calc(100% + 30px); max-width: none; margin-left: -15px; }
  .cl-home__catalog { margin-top: 65px; padding: 0; }
  .cl-home__tiles { grid-template-columns: 210px; gap: 24px; margin-top: 28px; }
  .cl-home__tiles li:nth-child(n+6):nth-child(-n+10) { margin-top: 0; }
}

}