/**
 * Two columns: `grid gap-12 lg:grid-cols-2 lg:gap-16`, each column's
 * heading a section heading. The checklist is shared (components.css),
 * `mt-8` here as everywhere. The terms
 * `mt-8 divide-y border-y`, each `py-4`, the term `font-medium`, its text
 * `mt-1 text-sm` muted. The link `mt-6`, in the 22px line the prototype's
 * inline-flex link gets in its block.
 */

.sba-c-columns .sba-c-columns-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
}

.sba-c-columns .sba-c-terms {
	margin: 32px 0 0;
	border-top: 1px solid var(--sba-border);
	border-bottom: 1px solid var(--sba-border);
}

.sba-c-columns .sba-c-terms > div {
	padding: 16px 0;
}

.sba-c-columns .sba-c-terms > div + div {
	border-top: 1px solid var(--sba-border);
}

.sba-c-columns .sba-c-terms dt {
	color: var(--sba-charcoal);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

.sba-c-columns .sba-c-terms dd {
	margin: 4px 0 0;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-c-columns .sba-c-terms-relaxed dd {
	line-height: 1.625;
}

.sba-c-columns .sba-c-column .sba-c-prose {
	margin-top: 16px;
}

.sba-c-columns .sba-c-column-link {
	display: block;
	margin: 24px 0 0;
	font-size: 16px;
	line-height: 22px;
}

/* Features: `mt-8 grid gap-6 sm:grid-cols-2`, each `flex gap-4`, the 40px
   tile `mt-0.5`, the title `font-bold`, the text `mt-1 text-sm
   leading-relaxed` muted. A row of links `mt-8`. */
.sba-c-columns .sba-c-column-features {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.sba-c-columns .sba-c-column-features li {
	display: flex;
	gap: 16px;
	margin: 0;
}

.sba-c-columns .sba-c-column-features .sba-c-icon-tile {
	margin-top: 2px;
}

.sba-c-columns .sba-c-column-features h3 {
	margin: 0;
	color: var(--sba-charcoal);
	font-family: var(--sba-font-sans);
	font-size: 16px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 24px;
}

.sba-c-columns .sba-c-column-features p {
	margin: 4px 0 0;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 1.625;
}

@media (min-width: 640px) {
	.sba-c-columns .sba-c-column-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sba-c-columns .sba-c-columns-row.sba-c-columns-7-5 {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.sba-c-columns .sba-c-columns-7-5 > :first-child {
		grid-column: span 7;
	}

	.sba-c-columns .sba-c-columns-7-5 > :last-child {
		grid-column: span 5;
	}

	.sba-c-columns .sba-c-columns-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 64px;
	}
}

/* A paragraph under the heading, over the checklist, `mt-6` muted at body
   size; the checklist then `mt-6`. */
.sba-c-columns .sba-c-column-lead {
	margin: 24px 0 0;
	color: var(--sba-slate);
	font-size: 16px;
	line-height: 1.625;
}

.sba-c-columns .sba-c-column-lead + .sba-c-checklist {
	margin-top: 24px;
}

/* A column that is only a checklist starts with it, level with the other
   column's eyebrow. */
.sba-c-columns .sba-c-column > .sba-c-checklist:first-child {
	margin-top: 0;
}