/* Start:/local/templates/rosveb/components/bitrix/news.list/brands-grid/style.css?17859331933926*/
/* ------------------------------------------------------------------
   Список производителей на /company/brands/.
   Ровная сетка одинаковых плиток: логотип + до трёх терминов
   специализации. Фон блока — основной серый #F8F8F8,
   плитки белые с мягкой обводкой.
   ------------------------------------------------------------------ */

/* Фон тянем на всю ширину окна, а сам блок остаётся в потоке страницы.
   Подложку выносим за пределы контейнера отрицательными отступами через
   тень-обводку: она не влияет на раскладку и не создаёт горизонтальный
   скролл, в отличие от приёма с 50vw (тот не учитывает полосу прокрутки). */
.brands-grid {
	padding: 40px 0 56px;

	background-color: #F8F8F8;
	box-shadow: 0 0 0 100vmax #F8F8F8;
	clip-path: inset(0 -100vmax);
}

.brands-grid__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

.brands-grid__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;

	height: 210px;
	padding: 22px 16px;
	box-sizing: border-box;

	background-color: #fff;
	border: 1px solid rgba(34, 37, 42, 0.07);
	border-radius: 8px;

	text-align: center;
	text-decoration: none;

	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.brands-grid__item:hover,
.brands-grid__item:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(34, 37, 42, 0.09);
	text-decoration: none;
}

/* --- логотип --- */

.brands-grid__logo {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	max-width: 170px;
	height: 54px;
}

.brands-grid__image {
	max-width: 100%;
	max-height: 100%;

	object-fit: contain;
}

/* --- название производителя --- */

.brands-grid__name {
	display: block;
	max-width: 100%;
	font-size: 18px;
	line-height: 22px;
	font-weight: 500;
	color: #22252A;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: #d7c7b54f;
	padding: 2px 10px;
	border-radius: 4px;
	width: 100%;
	transform: translateY(5px);
}

/* --- термины специализации --- */

.brands-grid__specs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	gap: 4px 7px;

	/* место под три строки терминов — карточки в ряду одной высоты */
	height: 66px;
	overflow: hidden;

	font-size: 14px;
	line-height: 18px;
	color: #6B6F76;
}

.brands-grid__spec {
	display: flex;
	align-items: center;
	gap: 7px;

	white-space: nowrap;
}

/* разделитель — часть термина, переносится вместе с ним */
.brands-grid__spec + .brands-grid__spec::before {
	content: "";

	width: 3px;
	height: 3px;

	background-color: #C05A3A;
	border-radius: 50%;

	flex: 0 0 auto;
}

.brands-grid__item:hover .brands-grid__specs {
	color: #22252A;
}

/* --- адаптив --- */

@media (max-width: 1199px) {

	.brands-grid__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 991px) {

	.brands-grid__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {

	.brands-grid {
		padding: 24px 0 40px;
	}

	.brands-grid__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.brands-grid__item {
		height: 196px;
		gap: 6px;

		padding: 18px 10px;
	}

	.brands-grid__logo {
		height: 44px;
	}

	.brands-grid__name {
		font-size: 16px;
		line-height: 20px;
	}

	.brands-grid__specs {
		height: 66px;

		font-size: 14px;
		line-height: 18px;
		gap: 3px 6px;
	}
}

/* End */
/* /local/templates/rosveb/components/bitrix/news.list/brands-grid/style.css?17859331933926 */