/* Grom Handling Kit: photo hero (as on the bushing page) and the two-part "in the kit" cards. */

/* Hero: photo on the right on desktop, photo above the copy on phones. */
.kit-hero .hero-media { overflow: hidden; }
.story .kit-hero .hero-img { height: 100%; object-position: 50% 60%; } /* beats ".story img { height: auto }" */
@media (min-width: 900px) {
	.hero.kit-hero { align-items: center; }
	.kit-hero .hero-media { left: 40%; }
	.kit-hero .hero-media::after { background: linear-gradient(to right, #000 0%, rgba(0,0,0,.55) 18%, rgba(0,0,0,0) 45%), linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 30%); }
	.kit-hero .hero-copy { padding: 48px 0; }
	.kit-hero .hero-copy > * { max-width: 460px; }
}
@media (max-width: 899px) {
	.hero.kit-hero { min-height: 0; display: block; }
	.kit-hero .hero-media { position: relative; height: 60svh; min-height: 340px; }
	.kit-hero .hero-media::after { background: linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 18%, rgba(0,0,0,0) 45%); }
	.kit-hero .hero-copy { padding: 8px 0 64px; }
}

/* The two parts */
.kit-parts { display: grid; gap: 18px; margin-top: 8px; }
@media (min-width: 760px) { .kit-parts { grid-template-columns: 1fr 1fr; } }
.kit-parts .panel { padding: clamp(22px, 3vw, 32px); }
.story .kit-parts img { width: 100%; height: 220px; object-fit: cover; border-radius: 10px; margin: 0 0 18px; }
.kit-parts .tag { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.kit-parts h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.2; }
.kit-parts p { color: var(--muted); margin: 0 0 14px; }
.kit-parts b { color: var(--text); }
.kit-parts .cta-2 { margin-left: 0; }
#install .cta-2.first { margin-left: 0; }
#install .specs a { white-space: nowrap; }
#install .specs { margin-bottom: 22px; }