#brands.brands {
	/* padding-block: var(--space-xxl); */
	background: var(--the-white);
	color: var(--jet-black);

	.section-wrapper {
		position: relative;
		z-index: 100;
		display: grid;
		grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
		gap: var(--grid-gap);
		align-items: start;
		width: var(--the-width);
		margin: 0 auto;
		height: 100%;

		#brands-intro {
			
			grid-column: 2 / span 8;
			grid-row: 1;
			z-index: 10;
			color: var(--jet-black);
			/* color: var(--the-white); */
			border-radius: var(--space-xs);
			margin: 0;
		}

		#brands-intro h2 {
			margin: 0 0 var(--space-sm);
			font-size: var(--fs-xl);
			letter-spacing: -0.04em;
			line-height: 1.05;
		}

		#brands-intro p {
			font-size: var(--fs-lg);
			line-height: 1.15;
			letter-spacing: -0.05em;
			text-wrap: balance;
			margin: 0;
		}

		.marquee-wrapper {
			grid-column: 1 / -1;
			grid-row: 2;
			width: 100vw;
			max-width: 100vw;
			overflow: hidden;
			display: grid;
			margin-left: calc(50% - 50vw);
			margin-right: calc(50% - 50vw);
		}
	}

	h2 {
		margin: 0;
	}

	.marquee {
		--brand-width: 400px;
		--brand-block-items: 7;
		overflow: hidden;
		width: 100%;
	}

	.marquee--middle {
		--brand-block-items: 6;
	}

	.marquee-track {
		display: flex;
		width: max-content;
		align-items: center;
	}

	.marquee-content {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: space-around;
		min-width: calc(var(--brand-width) * var(--brand-block-items));
		will-change: transform;
	}

	.brand-item {
		box-sizing: border-box;
		width: var(--brand-width);
		flex-shrink: 0;
		padding: var(--space-md);

		figure {
			margin: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--space-xs);
		}

		img {
			width: 100%;
			height: auto;
			aspect-ratio: 5 / 4;
			display: block;
			margin-bottom: -2rem;
		}
		
		figcaption {
			border-radius: var(--space-xxs);
			text-align: center;
			font-size: var(--fs-sm);
			padding: var(--space-xxs) var(--space-sm);
			line-height: 0.9;
			background-color: var(--silver);
			color: var(--jet-black);
			text-transform: uppercase;
			letter-spacing: 0.06em;
			transition: color 0.3s var(--out), background-color 0.3s var(--out);

			.brand-item:hover & {
				color: var(--jet-black);
				background-color: var(--the-white);
			}
		}
	}

	@media (min-width: 769px) {
		.marquee--duplicate {
			display: none;
		}
	}

	@media (max-width: 768px) {
		.marquee {
			--brand-width: 300px;
		}
	}
}

@media (max-width: 64rem) {
	#brands.brands {
		.section-wrapper {
			#brands-intro {
				grid-column: 1 / -1;
			}
		}
	}
}

@media (max-width: 48rem) {
	#brands.brands {
		.section-wrapper {
			width: 100%;
			margin-left: 0;
			margin-right: 0;

			#brands-intro,
			.marquee-wrapper {
				grid-column: 1 / -1;
			}

			#brands-intro {
				grid-row: 1;
				padding-inline: var(--space-xs);
			}

			.marquee-wrapper {
				grid-row: 2;
				width: 100%;
			}
		}
	}
}