/* proto-pages-home.css: Spectre's home (templates/search/home.html) over the shared frame proto-pages.css: the hero
   (the H1 and its line on the black side of Spectre's filter photo; on a phone a thin strip of the photo over the
   H1 on navy), the kit's vehicle band under it, the vehicle's block and the part tiles, Cold Air Intakes and Air Filters twice as wide. Tokens from cl-site.css. */
@layer base, kit, site;

@layer site {

.sp-hero { position: relative; display: flex; align-items: center; min-height: 280px; background: var(--site-bar); color: var(--site-on-dark); overflow: hidden; }
.sp-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: right center; }
.sp-hero__in { position: relative; width: 100%; max-width: var(--site-max); margin: 0 auto; padding: 40px 24px; }
.sp-hero__h { max-width: 620px; font: 700 64px/1 var(--site-font-heading); letter-spacing: -0.5px; text-transform: uppercase; color: var(--site-on-dark); }
.sp-hero__lead { max-width: 480px; margin-top: 16px; font: 500 19px/1.4 var(--site-font-body); color: var(--site-on-dark); }

.sp-home__in { padding-top: 40px; }
.sp-yours { margin-bottom: 48px; }
.sp-yours > .pp-shead { margin-top: 0; }
.sp-parts__h { margin-bottom: 16px; }

.sp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-tiles > li { display: flex; }
.sp-tiles .pp-tile { width: 100%; align-content: start; }
.sp-tiles__big { grid-column: span 2; }
.sp-tiles__big .pp-tile__img { height: 260px; }
.sp-tiles__big .pp-tile__name { font-size: 24px; }

@media (max-width: 979.98px) {
  .sp-hero { display: block; min-height: 0; background: var(--site-navy); }
  .sp-hero__img { position: static; width: 100%; height: 64px; }
  .sp-hero__in { padding: 16px 16px 20px; }
  .sp-hero__h { font-size: 38px; }
  .sp-hero__lead { margin-top: 8px; font-size: 15px; }
  .sp-home__in { padding-top: 20px; }
  .sp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-tiles__big { grid-column: auto; }
  .sp-tiles__big .pp-tile__img { height: 140px; }
  .sp-tiles__big .pp-tile__name { font-size: 14px; }
}

}