/*
 * Columns – a section title, then two to four columns of a heading and
 * short copy. Typography comes from css/base/typography.css; the grid
 * collapses to one column on a phone and two on a tablet.
 */
.block-columns {
	.sectionTitle {
		margin-bottom: 30px;
		text-align: center;
	}
}

.columns {
	display: grid;
	gap: 30px 40px;

	@media (min-width: 576px) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	@media (min-width: 992px) {
		grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
	}
}

.columns--2 { --columns: 2; }
.columns--3 { --columns: 3; }
.columns--4 { --columns: 4; }

.columns-heading {
	margin: 0 0 12px;
	font: var(--text-h3);
	color: var(--landing-heading);
}

.columns-text > :last-child {
	margin-bottom: 0;
}