.why {
	padding-block: 3rem;
	display:flex;
	flex-direction: column;
	gap: clamp(1rem, 4vw, 4rem);
	text-align: center;
}

.why h2.section-title {
	color: var(--text-color);
	font-family: var(--heading-font);
}

.why section {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: wrap row;
	gap: clamp(0rem, 3vw, 3rem);
}

.why section .card {
	padding: 1rem;
	gap: clamp(0rem, 3vw, 3rem)

	flex: 0 0 clamp(calc(2 * var(--card-imag-width)), 18%, 25rem);
	min-height: clamp(3rem, 25vw, 50rem);

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
}

.why section .card img.icon {
	min-width: 60px;
}

.why section .card h3.title {
	color: var(--accent-color);
	font-family: var(--body-font);
	padding-block: .7rem;
}

.why section .card p.discription {
	color: var(--text-color);
	font-family: var(--body-font);

	text-align: center;
	
	padding-block: .4rem;
	max-width: 300px;
	
}