/* Grom solid bar-clamp bushings: photo hero (portrait product shot) and the stock vs solid cards. */

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

/* Stock vs solid */
.compare { display: grid; gap: 18px; margin-top: 8px; }
@media (min-width: 760px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare .panel { padding: clamp(22px, 3vw, 32px); }
.compare .panel.solid { border-color: rgba(248,0,0,.55); }
.compare .tag { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.compare .solid .tag { color: var(--accent-text); }
.compare h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.2; }
.compare p { color: var(--muted); margin: 0; }
.compare b { color: var(--text); }
.trade-off, .sold { margin: 22px 0 0; max-width: 760px; }
#install .cta-2.first { margin-left: 0; }
#kit .cta { margin-top: 4px; }
.sold b { color: var(--text); }
#install .tools { margin: 18px 0 22px; color: var(--muted); }
#install .tools b { color: var(--text); margin-right: 6px; }