.catalog {
	background-color: var(--color-white);
	padding-block: 8rem;
}

.catalog__header {
	display: grid;
	grid-template-columns: 88rem 88rem; /* 880 + 880 */
	column-gap: var(--grid-gap);
	margin-bottom: 10rem; /* 100px */
}

.catalog__intro {
	opacity: 0.7;
}

.catalog__item + .catalog__item {
	margin-top: 12rem; /* 120px */
}

/* Текстовый блок карточки — общий для 01/03/04 */
.catalog__text {
	width: 43rem; /* 430px */
}

.catalog__tag {
	margin-bottom: 2rem;
}

.catalog__heading {
	margin-bottom: 2rem;
}

.catalog__description {
	margin-bottom: 3rem;
	opacity: 0.7;
}

.catalog__pn {
	opacity: 0.3;
}

.catalog__icon {
	display: block;
	flex-shrink: 0;
	width: 13rem; /* 130px */
	height: 13rem;
}

.catalog__caption {
	opacity: 0.7;
}

.catalog__photo {
	display: block;
	object-fit: cover;
}

/* 01 — Агрегаты и системы вертолёта: текст слева + иконка top-right,
   ниже — квадратное фото (с подписью) + широкое фото */
.catalog__item--01 .catalog__item-head {
	position: relative;
}

.catalog__item--01 .catalog__icon {
	position: absolute;
	top: 0;
	right: 0;
}

.catalog__media {
	display: grid;
	grid-template-columns: 88rem 88rem;
	column-gap: var(--grid-gap);
	align-items: end;
	margin-top: 15rem; /* 150px */
}

.catalog__media-col {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
}

.catalog__media-col .catalog__caption {
	max-width: 28.8rem;
}

.catalog__photo--square {
	width: 28rem; /* 280px */
	height: 28rem;
}

.catalog__photo--wide {
	width: 88rem; /* 880px */
	height: 48.5rem; /* 485px */
}

/* 02 — Расходные материалы: полноширинный «ряд», фото слева */
.catalog__row {
	display: grid;
	grid-template-columns: 88rem 88rem;
	column-gap: var(--grid-gap);
	align-items: end;
}

.catalog__item--02 .catalog__photo {
	width: 88rem; /* 880px */
	height: 52.7rem; /* 527px */
}

.catalog__row-content {
	display: flex;
	align-items: flex-end;
	gap: 32.1rem; /* 321px — широкий воздух между иконкой и текстом в референсе */
}

.catalog__item--02 .catalog__text {
	width: auto;
	max-width: 30rem; /* 300px, Hug */
}

/* 03 — Части планера: текст в правой колонке верхнего ряда,
   иконка слева + фото справа в нижнем ряду (оба top-aligned) */
.catalog__item-head--right {
	display: grid;
	grid-template-columns: 88rem 88rem;
	column-gap: var(--grid-gap);
}

.catalog__item-head--right .catalog__text {
	grid-column: 2;
	width: auto;
	max-width: 43rem;
}

.catalog__row--start {
	align-items: start;
	margin-top: 15rem; /* 150px */
}

.catalog__item--03 .catalog__photo {
	width: 88rem; /* 880px */
	height: 52.7rem; /* 527px */
}

/* 04 — Двигатели и силовые установки: текст + подпись в верхнем ряду,
   ниже — полноширинное фото на всю ширину контейнера */
.catalog__row--top {
	align-items: start;
	margin-bottom: 6rem; /* 60px */
}

.catalog__caption--right {
	grid-column: 2;
	max-width: 32rem;
	margin-left: auto;
	text-align: right;
}

.catalog__photo--full {
	width: 100%;
	height: auto;
}

@media (max-width: 1360px) {
	.catalog__header,
	.catalog__media,
	.catalog__row,
	.catalog__item-head--right {
		grid-template-columns: 1fr;
		row-gap: 3rem; /* 30px */
	}

	.catalog__item + .catalog__item {
		margin-top: 10rem;
	}

	.catalog__text,
	.catalog__item--02 .catalog__text,
	.catalog__item-head--right .catalog__text {
		width: 100%;
		max-width: none;
	}

	.catalog__item--01 .catalog__icon {
		position: static;
		margin-bottom: 2rem;
	}

	.catalog__media {
		margin-top: 6rem;
	}

	.catalog__media-col {
		flex-direction: column;
		align-items: flex-start;
		gap: 2rem;
	}

	.catalog__media-col .catalog__caption {
		max-width: none;
	}

	.catalog__photo--square,
	.catalog__photo--wide,
	.catalog__item--02 .catalog__photo,
	.catalog__item--03 .catalog__photo {
		width: 100%;
		height: auto;
	}

	.catalog__row-content {
		flex-direction: column;
		align-items: flex-start;
		gap: 2rem;
	}

	.catalog__row--start {
		margin-top: 6rem;
	}

	.catalog__caption--right {
		grid-column: 1;
		max-width: none;
		margin-left: 0;
		text-align: left;
	}
}

@media (max-width: 480px) {
	.catalog {
		padding-block: 6rem;
	}

	.catalog__item + .catalog__item {
		margin-top: 8rem;
	}

	/* Иконка 01 в DOM идёт после .catalog__text (общая вёрстка с десктопом,
	   где она абсолютно спозиционирована сверху справа) — на мобильном
	   position:static просто оставляет её в потоке ПОСЛЕ текста. В референсе
	   иконка должна быть первой, поэтому переставляем через flex-order. */
	.catalog__item--01 .catalog__item-head {
		display: flex;
		flex-direction: column;
	}

	.catalog__item--01 .catalog__icon {
		order: -1;
	}

	/* 01: на мобильном референсе после P/N сразу широкое фото (tach2) —
	   ни подписи «Поставляются только...», ни квадратного фото (tech) нет. */
	.catalog__item--01 .catalog__media-col {
		display: none;
	}

	/* 02: в DOM фото идёт до row-content (icon+text) — на десктопе/планшете это
	   осмысленно раскладывает их по двум колонкам грида, но при сжатии в один
	   столбец на мобильном фото должно идти ПОСЛЕ текста, а не до (референс).
	   order работает и для grid-автоплейсмента, поэтому DOM не трогаем. */
	.catalog__item--02 .catalog__photo {
		order: 1;
	}

	/* 03: текстовый блок и (иконка + фото) — соседние, но РАЗНЫЕ контейнеры
	   (.catalog__item-head--right и .catalog__row--start), поэтому order сам
	   по себе тут не поможет — сначала «распрямляем» оба через display:contents,
	   чтобы icon/text/photo стали элементами одного flex-контейнера и order
	   между ними заработал. */
	.catalog__item--03 {
		display: flex;
		flex-direction: column;
	}

	.catalog__item--03 .catalog__item-head--right,
	.catalog__item--03 .catalog__row--start {
		display: contents;
	}

	.catalog__item--03 .catalog__icon {
		order: -1;
		margin-bottom: 2rem; /* тот же отступ icon→tag, что у 01 */
	}

	.catalog__item--03 .catalog__photo {
		order: 1;
		margin-top: 6rem; /* заменяет margin-top .catalog__row--start, потерянный из-за display:contents */
	}
}

@media (min-width: 481px) and (max-width: 1360px) {
	.home-page .catalog__header,
	.home-page .catalog__media,
	.home-page .catalog__row,
	.home-page .catalog__item-head--right {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--grid-gap);
		row-gap: 0;
	}

	.home-page .catalog__text,
	.home-page .catalog__item--02 .catalog__text,
	.home-page .catalog__item-head--right .catalog__text {
		width: 43rem;
		max-width: 100%;
	}

	.home-page .catalog__item-head--right .catalog__text {
		grid-column: 2;
	}

	.home-page .catalog__item--01 .catalog__icon {
		position: absolute;
		margin-bottom: 0;
	}

	.home-page .catalog__media {
		margin-top: 15rem;
	}

	.home-page .catalog__media-col {
		flex-direction: row;
		align-items: flex-end;
	}

	.home-page .catalog__media-col .catalog__caption {
		max-width: 28.8rem;
	}

	.home-page .catalog__photo--square {
		width: 28rem;
		height: 28rem;
	}

	.home-page .catalog__photo--wide,
	.home-page .catalog__item--02 .catalog__photo,
	.home-page .catalog__item--03 .catalog__photo {
		width: 100%;
		height: auto;
	}

	.home-page .catalog__row-content {
		flex-direction: row;
		align-items: flex-end;
		gap: 4rem;
	}

	.home-page .catalog__row--start {
		margin-top: 15rem;
	}

	.home-page .catalog__caption--right {
		grid-column: 2;
		max-width: 32rem;
		margin-left: auto;
		text-align: right;
	}
}