.mk-values {
	--grow: 2.6;
	--idle: rgba(241, 245, 249, 0.72);
	--open: rgba(37, 63, 82, 0.94);
	--title: #253f52;
	--title-on: #fff;
	--text-on: #b9c8d4;
	--num: #bc2026;
	display: flex; gap: 12px; height: 360px;
}
.mk-values .mk-value {
	flex: 1; min-width: 0; position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: space-between;
	padding: 32px 30px; border-radius: var(--mk-r);
	border: 1px solid rgba(37, 63, 82, 0.12); background: var(--idle);
	transition: flex 0.6s cubic-bezier(0.65, 0, 0.35, 1), background 0.4s;
}
.mk-values .mk-value:hover, .mk-values .mk-value:focus { background: var(--idle); }
.mk-value__n { font: 500 12px var(--mk-mono); letter-spacing: 0.14em; color: var(--num); }
.mk-value__body { margin-top: auto; display: block; }
.mk-value__t { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; color: var(--title); transition: color 0.4s; }
.mk-value__p {
	display: block; max-width: 440px; font-size: 16px; line-height: 1.6; color: var(--text-on);
	opacity: 0; max-height: 0; transition: opacity 0.4s, max-height 0.6s;
}
.mk-values .mk-value.is-on, .mk-values .mk-value.is-on:hover, .mk-values .mk-value.is-on:focus { flex: var(--grow); background: var(--open); border-color: var(--mk-navy); }
.mk-value.is-on .mk-value__t { color: var(--title-on); }
.mk-value.is-on .mk-value__n { color: #f0505f; }
.mk-value.is-on .mk-value__p { opacity: 1; max-height: 220px; margin-top: 14px; transition: opacity 0.5s 0.25s, max-height 0.6s; }

@media (max-width: 760px) {
	.mk-values { flex-direction: column; height: auto !important; }
	.mk-value__p { opacity: 1; max-height: none; margin-top: 12px; color: var(--mk-gray); }
	.mk-value.is-on .mk-value__p { color: var(--text-on); }
	.mk-value__t { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) { .mk-values .mk-value { transition: none; } }