/**
 * Why ONOFF — feature cards grid (homepage).
 */

.why-onoff {
	direction: rtl;
}

.why-onoff__features {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	width: 100%;
	max-width: 1088px;
	min-height: 580.98px;
	margin-inline: auto;
	padding: 48px 0 0;
	direction: rtl;
	box-sizing: border-box;
}

.why-onoff__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	width: 100%;
	max-width: 1088px;
	min-height: 532.98px;
	margin: 0;
	padding: 0;
	list-style: none;
	direction: rtl;
	box-sizing: border-box;
}

.why-onoff__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	min-height: 251px;
	padding: 32px;
	background: #fff;
	border-radius: 24px;
	box-shadow:
		0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -4px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	direction: rtl;
	text-align: start;
}

.why-onoff__card-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	max-width: 100%;
	margin: 0;
	direction: rtl;
	text-align: start;
}

.why-onoff__card-icon {
	display: block;
	align-self: flex-start;
	width: 60px;
	height: 60px;
	font-family: var(--onoff-font-family);
	font-size: 60px;
	font-weight: 400;
	line-height: 60px;
	text-align: start;
	color: #262415;
}

.why-onoff__card-title {
	display: block;
	align-self: stretch;
	width: 100%;
	margin: 0;
	padding: 24px 0 0;
	font-family: var(--onoff-font-family);
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	text-align: start;
	color: #262415;
}

.why-onoff__card-desc {
	display: block;
	align-self: stretch;
	width: 100%;
	margin: 0;
	padding: 12px 0 0;
	font-family: var(--onoff-font-family);
	font-size: 18px;
	font-weight: 400;
	line-height: 29px;
	text-align: start;
	color: #7c6f5f;
}

@media (max-width: 1024px) {
	.why-onoff__features {
		min-height: 0;
		padding-inline: var(--onoff-gutter);
	}

	.why-onoff__grid {
		min-height: 0;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.why-onoff__grid {
		grid-template-columns: 1fr;
		max-width: 341.33px;
		margin-inline: auto;
	}

	.why-onoff__features {
		padding-block-start: 32px;
	}
}