.models-page {
	padding-block: 6rem 12rem;
}

.models-page__title {
	margin-bottom: 4rem;
}

.models-page__list {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* Карточка — переиспользованный компонент card-dark (панель + фото, kicker,
   info-подсказка — всё уже готово, см. card-dark.css), здесь только то, что
   отличает именно эту страницу: другой размер (панель/фото — по фактической
   половине ширины, а не фиксированные rem под конкретный узкий контекст, как
   у finance), свой CTA и отсутствие красного уголка-акцента (в референсе этой
   страницы его нет — только у finance). */
.models-page__card.card-dark {
	height: 60rem; /* 600px */
}

.models-page__card .card-dark__panel,
.models-page__card .card-dark__media {
	width: auto;
	flex: 1;
}

.models-page__card .card-dark__panel {
	padding: 4rem;
}

.models-page__card .card-dark__media::before {
	display: none;
}

@media (max-width: 1360px) {
	.models-page__card.card-dark {
		height: 42rem; /* 420px */
	}
}

@media (max-width: 480px) {
	.models-page {
		padding-block: 4rem 8rem;
	}

	.models-page__title {
		margin-bottom: 3rem;
	}

	/* card-dark на мобильном сам по себе остаётся height:auto (см. card-dark.css) —
	   но здесь высота явно задана выше для десктопа/таблета и без сброса
	   продолжила бы каскадом действовать и тут поверх мобильной flex-column
	   раскладки, обрезая контент. */
	.models-page__card.card-dark {
		height: auto;
	}

	.models-page__card .card-dark__panel {
		padding: 2.5rem;
	}

	/* Свои мобильные фото (assets/images/models/models-mobile/, отдельные кадры,
	   не desktop-кроп) — их собственное соотношение сторон 340×228, не квадрат
	   1/1 из базового card-dark.css (тот рассчитан на другие, финансовые,
	   изображения) — переопределяем точечно только для этой страницы. */
	.models-page__card .card-dark__media {
		aspect-ratio: 340 / 228;
	}
}