/* Yana Berg — строка марок на первом экране: 5 логотипов в ряд, на мобильном 3 + 2 по центру. */

.yb-brands {
	padding: 48px 0;
}

.yb-brands__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: center;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.yb-brands__item {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 72px;
	margin: 0;
	color: var(--yb-text-subtle);
	transition: color var(--yb-duration) ease;
}

.yb-brands__item:hover {
	color: var(--yb-white);
}

.yb-brands__item svg {
	display: block;
	width: auto;
	max-width: 88%;
}

/* Оптическое выравнивание: чем вытянутее знак, тем он ниже — визуальный вес у всех одинаковый. */
.yb-brands__item--loreal svg {
	height: 22px;
}

.yb-brands__item--wahl-professional svg {
	height: 34px;
}

.yb-brands__item--schwarzkopf-professional svg {
	height: 62px;
}

.yb-brands__item--babyliss-pro svg {
	height: 21px;
}

.yb-brands__item--revlon svg {
	height: 21px;
}

@media (max-width: 700px) {
	.yb-brands {
		padding: 40px 0;
	}

	/* 3 + 2: шесть дорожек, каждый логотип занимает две; вторая строка сдвинута к центру. */
	.yb-brands__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		row-gap: 20px;
	}

	.yb-brands__item {
		grid-column: span 2;
		height: 48px;
	}

	.yb-brands__item:nth-child(4) {
		grid-column: 2 / span 2;
	}

	.yb-brands__item--loreal svg {
		height: 15px;
	}

	.yb-brands__item--wahl-professional svg {
		height: 24px;
	}

	.yb-brands__item--schwarzkopf-professional svg {
		height: 44px;
	}

	.yb-brands__item--babyliss-pro svg {
		height: 14px;
	}

	.yb-brands__item--revlon svg {
		height: 14px;
	}
}