/* ==========================================================================
   Homepage approach
   Block: .home-approach
   ========================================================================== */

.home-approach {
	padding-block: var(--space-4) var(--space-10);
}

.home-approach__panel {
	display: grid;
	gap: var(--space-7);
	padding: var(--space-7) var(--space-5);
	border-radius: 1.5rem; /* 24px */
	color: var(--color-on-dark);
	background: var(--color-navy);
}

.home-approach__title {
	margin: 0 0 var(--space-5);
	font-family: var(--font-display); /* Sora */
	font-size: var(--font-size-5xl); /* 48px */
	font-style: normal;
	font-weight: var(--font-weight-medium); /* 500 */
	letter-spacing: 0;
	line-height: 3.35rem; /* 53.6px */
	vertical-align: middle;
}

.home-approach__title span {
	color: var(--color-primary); /* #0D8651 */
}

.home-approach__copy {
	margin: 0;
	max-width: 28rem;
	color: #ffffff;
	font-size: var(--font-size-sm);
	line-height: 1.709; /* 23.93px */
}

.home-approach__grid {
	display: grid;
	gap: var(--space-7) 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-approach__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 var(--space-4);
	text-align: center;
}

.home-approach__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem; /* 48px */
	height: 3rem;
	margin-bottom: var(--space-3);
}

.home-approach__icon img {
	display: block;
	width: 3rem;
	height: 3rem;
}

.home-approach__item-title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display); /* Sora */
	font-size: var(--font-size-md); /* 16px */
	font-style: normal;
	font-weight: var(--font-weight-semibold); /* 600 */
	letter-spacing: -0.48px;
	line-height: var(--line-height-snug);
	text-align: center;
	vertical-align: middle;
}

.home-approach__item p {
	margin: 0;
	max-width: 16.5rem;
	color: #a4a4a4;
	font-size: var(--font-size-sm);
	line-height: 1.4286; /* 20px */
}

@media (min-width: 48rem) {
	.home-approach__panel {
		padding: var(--space-8) var(--space-7);
	}

	.home-approach__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		row-gap: var(--space-8);
	}

	.home-approach__item {
		grid-column: span 2;
	}

	.home-approach__item:nth-child(4) {
		grid-column: 2 / 4;
	}

	.home-approach__item:nth-child(5) {
		grid-column: 4 / 6;
	}

	.home-approach__item:nth-child(2),
	.home-approach__item:nth-child(3),
	.home-approach__item:nth-child(5) {
		border-left: 1px solid rgb(255 255 255 / 0.12);
	}
}

@media (min-width: 64rem) {
	.home-approach__panel {
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.24fr);
		align-items: center;
		gap: 0;
		padding: 3.5rem 3.25rem;
	}

	.home-approach__intro {
		padding-right: var(--space-5);
		border-right: 1px solid rgb(255 255 255 / 0.12);
	}

	.home-approach__grid {
		padding-left: var(--space-2);
	}
}