/* ==========================================================================
   MaxxedOut — Features ("Why choose us")
   ========================================================================== */

.mxo-scope.mxo-features {
	--ft-cols: 3;
	--ft-card: var(--mx-white);
}
.mxo-scope.mxo-features.mxo-surface--white { --ft-card: var(--mx-white); }
.mxo-scope.mxo-features.mxo-surface--navy,
.mxo-scope.mxo-features.mxo-surface--blue { --ft-card: var(--s-card); }

.mxo-scope.mxo-features--cards .mxo-features__grid {
	display: grid;
	grid-template-columns: repeat(var(--ft-cols), minmax(0, 1fr));
	gap: 24px;
}
.mxo-scope.mxo-features--cards .mxo-feat {
	display: grid;
	align-content: start;
	gap: 12px;
	padding: 34px 32px 36px;
	background: var(--ft-card);
	border: 1px solid var(--s-line);
	border-radius: var(--mx-radius-lg);
	transition:
		opacity 0.95s var(--mx-ease-expo) var(--d, 0ms),
		transform 0.95s var(--mx-ease-expo) var(--d, 0ms),
		border-color 0.4s var(--mx-ease),
		box-shadow 0.5s var(--mx-ease);
}
.mxo-scope.mxo-features--cards .mxo-feat.is-in:hover {
	transform: translate3d(0, -6px, 0);
	transition-delay: 0ms;
	border-color: transparent;
	box-shadow: var(--mx-shadow);
}

.mxo-scope .mxo-feat__icon {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin-bottom: 10px;
	color: var(--s-chip-ink);
	background: var(--s-chip);
	border-radius: 50%;
	transition: color 0.35s var(--mx-ease), background-color 0.35s var(--mx-ease);
}
.mxo-scope .mxo-feat__icon .mxo-ico {
	width: 27px;
	height: 27px;
}
.mxo-scope .mxo-feat__icon .mxo-ico--img { object-fit: contain; }
.mxo-scope .mxo-feat:hover .mxo-feat__icon {
	color: var(--mx-white);
	background: var(--mx-blue);
}
.mxo-scope .mxo-feat__title {
	font-size: 20px;
	font-weight: 700;
	font-stretch: 102%;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--s-ink);
}
.mxo-scope .mxo-feat__text {
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--s-body);
}

.mxo-scope .mxo-features__actions { margin-top: 48px; }
.mxo-scope .mxo-features__actions--center { justify-content: center; }

/* -------------------------------------------------------- photo layout */
.mxo-scope .mxo-features__split {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(48px, 6vw, 96px);
	align-items: center;
}
.mxo-scope .mxo-features__media {
	aspect-ratio: 4 / 5;
	border-radius: var(--mx-radius-lg);
}
.mxo-scope .mxo-features__side .mxo-head { margin-bottom: 44px; }
.mxo-scope.mxo-features--photo .mxo-features__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 34px 40px;
}
.mxo-scope.mxo-features--photo .mxo-feat {
	display: grid;
	align-content: start;
	gap: 8px;
}
.mxo-scope.mxo-features--photo .mxo-feat__icon {
	width: 52px;
	height: 52px;
	margin-bottom: 8px;
}

@media (max-width: 1024px) {
	.mxo-scope.mxo-features { --ft-cols: 2; }
	.mxo-scope .mxo-features__split { grid-template-columns: minmax(0, 1fr); }
	.mxo-scope .mxo-features__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
	.mxo-scope.mxo-features { --ft-cols: 1; }
	.mxo-scope.mxo-features--cards .mxo-features__grid { gap: 16px; }
	.mxo-scope.mxo-features--cards .mxo-feat { padding: 28px 24px 30px; }
	.mxo-scope.mxo-features--photo .mxo-features__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}