/* "We're mentioned on" press-logo strip. Same markup, logos, sizing and animation as the .brands block
   on the homepage (index3.html), where the rules are scoped to #home-page, so buy pages load this instead.
   Unlike the homepage's inset rounded box on mobile, it runs edge to edge at every width. */

.brands,
.brands * {
	font-family: "Inter", sans-serif;
	box-sizing: border-box;
}

.brands {
	padding: 20px 0 25px;
	background-color: transparent;
	width: 100%;
}

.brands .slider {
	overflow: hidden;
	position: relative;
	margin-top: 16px;
}

.brands .slide-track {
	--slide-distance: -2817.5px;
	width: 8436.6px;
	display: flex;
	align-items: center;
	gap: 16px;
	animation: brands-scroll 100s linear infinite;
}

.brands .divider {
	width: 1px;
	height: 7px;
	background-color: #7d7d7d;
	transform: scaleX(0.5);
}

.brands .item img {
	height: calc(25px * var(--logo-scale, 1));
	width: auto;
	display: block;
}

@keyframes brands-scroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(var(--slide-distance));
	}
}

@media (min-width: 768px) {
	.brands .slider {
		margin-top: 22px;
	}

	.brands .slide-track {
		--slide-distance: -3023.8px;
		width: 9051.3px;
		gap: 20px;
	}

	.brands .item img {
		height: calc(26px * var(--logo-scale, 1));
	}

	.brands .divider {
		background-color: #696969;
		height: 8px;
	}
}

@media (min-width: 992px) {
	.brands>div:first-child {
		font-size: 18px;
	}

	.brands .slider {
		margin-top: 24px;
	}

	.brands .slide-track {
		--slide-distance: -3456.7px;
		width: 10348px;
		gap: 22px;
	}

	.brands .item img {
		height: calc(30px * var(--logo-scale, 1));
	}

	.brands .divider {
		background-color: #4c4c4c;
		height: 9px;
	}
}