/*
 * Home B Why buy here (parts/home-b/why.php), Raphael's line and the order trail cropped to
 * three stops (why.css), on white after Your route (grey). The title, the lead and the
 * link, then the rail; from 80rem the words take the left column. Breakpoints as home-b.css.
 */

@layer components {
	.hdc-home-b .hdc-b-why {
		padding-block: var(--space-section);
		border-top: 1px solid var(--line);
		background: var(--white);
		color: var(--ink);
	}

	.hdc-home-b .hdc-b-why__grid {
		display: grid;
		gap: 2rem;
	}

	.hdc-home-b .hdc-b-why__lead {
		max-width: 30ch;
		margin: 1rem 0 0;
		color: var(--body);
		font-size: 1.1875rem;
		line-height: 1.4;
	}

	@media (min-width: 80rem) {
		.hdc-home-b .hdc-b-why__grid {
			grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
			align-items: start;
			gap: 4rem;
		}

		.hdc-home-b .hdc-b-why__lead {
			margin-top: 1.5rem;
			font-size: 1.375rem;
		}
	}
}