.brands-carousel {
	/* Never exceed the viewport: --container is a fixed ladder (748/992/1280px)
	   whose smallest rung is wider than any phone. */
	width: min(var(--container), 100%);
	margin: auto !important;
	
	.brand-carousel-item {
		height: 100%;
		display: flex;
		background: #ffffff;
		border-radius: var(--border-radius-medium);
		padding: 10px;
		/* box-shadow: 0 0px 12px rgba(0, 0, 0, 0.10);
		transition: all 0.3s ease;
		&:hover{
			transform: translateY(-6px);
			box-shadow: 0 0px 30px rgba(0, 0, 0, 0.10);
		} */
		
		a {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 100%;
			text-decoration: none;
			
			img {
				height: 150px;
				object-fit: contain;
				display: block;
				margin: 0 !important;
			}
		}
	}
	& .splide__arrow {
		--button-size: 40px;
		--button-gap: 20px;
		/* Clamp at 0: goes negative when --container exceeds the viewport,
		   which pushed the arrow outside the right edge. */
		--next-button-position: max(0px, calc((100vw - var(--container)) / 2));
		--prev-button-position: calc(var(--next-button-position) + var(--button-gap));
		width: var(--button-size) !important;
		height: var(--button-size) !important;
		border-radius: 50% !important;
		padding: 0;
		background: black;
		color: white;
		font-size: 0;
		line-height: 0;
		position: absolute;
		top: calc(100% + 10px);
		transition: all .3s ease;
		opacity: 1 !important;
		
		&::before{
			display: block;
			font-size: var(--font-size-regular);
			font-family: var(--font-family-fontawesome);
		}
		
		
		}
		
		&.splide__arrow--next {
			right: var(--next-button-position) !important;
			left: auto !important;
			transform: translateY(0) !important;
			&::before{
				content: '\f061';
			}
		}
		
		&:hover{
			background: white;
			color: black;
			box-shadow: 0 0 1px 1px;
		}
		&:disabled{
			opacity: .9 !important;
		}
		& img{
/* 			display: none !important; */
		}
	}
}