/*
	Solutions > Dealer Groups (solutions/dealer-groups-crm-dms-software.php)

	Only the bands that index.php does not have. Loaded after css/index/index.css, so it reuses that file's
	.h2- tokens, type and head/lede/points styles and adds the unit types, the group run and how a group grows.
*/

/* ---------------------------------------------------------------- Unit types */

.dp-home .h2-units {
	background: var(--h2-fog);
}

.dp-home .h2-units-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.dp-home .h2-unit {
	padding: 28px 28px 32px 28px;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: inset 0 0 0 1px var(--h2-line);
}

.dp-home .h2-unit-image {
	display: block;
	width: 100%;
	max-width: 240px;
	height: auto;
	margin: 0 0 24px 0;
}

.dp-home .h2-unit-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.dp-home .h2-unit-text {
	max-width: 36ch;
	margin-top: 10px;
	color: var(--h2-ink-soft);
}


/* ---------------------------------------------------------------- group run */

.dp-home .h2-deal {
	background: #ffffff;
}

.dp-home .h2-deal-inner {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
	gap: 72px;
	align-items: center;
}

.dp-home .h2-deal .h2-lede {
	margin-top: 20px;
}

.dp-home .h2-deal-image {
	display: block;
	width: 100%;
	height: auto;
}


/* ---------------------------------------------------------------- Selling year */

.dp-home .h2-seasons {
	background: #ffffff;
}

.dp-home .h2-seasons-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dp-home .h2-season {
	padding-top: 24px;
	border-top: 2px solid var(--h2-ink);
}

.dp-home .h2-season-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #e6f2fd;
	font-size: 18px;
	color: var(--h2-blue);
}

.dp-home .h2-season-name {
	margin-top: 20px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--h2-blue);
}

.dp-home .h2-season-title {
	margin-top: 6px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.dp-home .h2-season-text {
	max-width: 30ch;
	margin-top: 10px;
	color: var(--h2-ink-soft);
}


/* ---------------------------------------------------------------- What it changes
   Reuses the Modules list from css/index/index.css, with the round icon of the seasons above the title */

.dp-home .h2-changes {
	background: #ffffff;
}

.dp-home .h2-changes .h2-modules-list li {
	padding-top: 24px;
}

.dp-home .h2-changes .h2-season-icon {
	margin-bottom: 18px;
}

.dp-home .h2-changes .h2-head {
	margin-bottom: 56px;
}


/* ---------------------------------------------------------------- One sale, start to finish */

.dp-home .h2-steps {
	background: var(--h2-fog);
}

.dp-home .h2-steps .h2-head {
	margin-bottom: 56px;
}

.dp-home .h2-steps-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dp-home .h2-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--h2-ink);
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
}

.dp-home .h2-step-title {
	margin-top: 20px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.dp-home .h2-step-text {
	max-width: 30ch;
	margin-top: 10px;
	color: var(--h2-ink-soft);
}


@media (max-width: 991px) {

	.dp-home .h2-units-list,
	.dp-home .h2-steps-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dp-home .h2-deal-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.dp-home .h2-seasons-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {

	.dp-home .h2-units-list,
	.dp-home .h2-steps-list,
	.dp-home .h2-seasons-list {
		grid-template-columns: minmax(0, 1fr);
	}
}