/* Направления: 2×2 на десктопе, слайдер 2 карточки столбиком ниже 1200. */

.directions__head--center { justify-content: flex-start; text-align: left; }

.directions .slider-nav--mobile { margin-top: 15px; }

.directions__slider .swiper-slide { height: auto; }

.directions__card {
	position: relative;
	display: flex;
	gap: 12px;
	height: 100%;
	min-height: 188px;
	padding: 20px;
	overflow: hidden;
	border: 1px solid var(--c-line);
	border-radius: 10px;
	background: var(--c-cream);
}

.directions--tall .directions__card { min-height: 228px; }

.directions__card--beige { background: var(--c-beige); }

.directions__main {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
}

/* Перенос «Восстановление / организма» только на десктопе: br в одну строку. */
.directions__title br { display: none; }

.directions__title { color: var(--c-orange); }

.directions__list { max-width: 74%; }

.directions__br--desk { display: none; }

.directions__ill {
	position: absolute;
	right: 2px;
	bottom: 0;
	width: 46%;
	height: 78%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	pointer-events: none;
}

.directions__ill svg,
.directions__art {
	width: auto;
	height: 100%;
	max-width: 100%;
}

.directions__note {
	margin-top: 15px;
	max-width: 650px;
	font-weight: 400;
	color: rgba(48, 48, 48, 0.3);
}

@media (min-width: 768px) {
	.directions__card,
	.directions--tall .directions__card { min-height: 240px; }
	.directions__list { max-width: 68%; }
	.directions__ill { width: 40%; height: 88%; }
}

@media (min-width: 1200px) {
	.directions__head--center { justify-content: center; text-align: center; }

	.directions__slider .swiper-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.directions__slider .swiper-slide { width: auto; margin: 0; }

	.directions__card { min-height: 240px; }
	.directions--tall .directions__card { min-height: 306px; }

	.directions__main { max-width: 400px; }
	.directions__list { max-width: none; }
	.directions__title { max-width: 20em; }
	.directions__title br { display: unset; }

	.directions__title { color: var(--c-black); }

	.directions__card--accent .directions__title { color: var(--c-orange); }

	.directions__br--desk { display: inline; }
	.directions__br--mob { display: none; }

	.directions__ill {
		right: 8px;
		bottom: 4px;
		width: 220px;
		height: 250px;
	}

	.directions__note {
		margin-top: 40px;
		font-weight: 500;
		color: var(--c-black);
	}
}